如何使用css，把div设置为一个椭圆容器,在做html页面开发时，我们一般都是使用div来做容器的，如果你需要一个椭圆形的容器，我们可以使用div来实现的，下面来看一下。......
css如何制作条纹渐变背景
来源：互联网
2023-03-16 19:11:35 102
css如何制作条纹渐变背景
css如何制作条纹渐变背景
在电脑上打开网页编辑器，新建一个HTML页面，如图：
制作一个宽600px、高40px的长方形，如图：
然后给这个长方形设置一个背景色，颜色使用rgba模式，将透明度设置成0.2，background: rgba(83,172,150,0.2);如图：
在制作一个制作一个宽600px、高40px的长方形，使用rgba模式添加背景色，透明度设置为0.4，如图：
同样的方法再分别制作三个宽600px、高40px的长方形，使用rgba模式添加背景色，透明度分别设置为0.6,0.8,1.0。
然后让这五个长方形放在同一个容器中，与相邻的上方形紧贴在一块，通过使用rgba模式来控制同一种颜色的不同透明度效果，一个条纹渐变背景色就做好了。
源代码：
!DOCTYPE html>
html>
head>
meta charset="UTF-8">
title>/title>
style>
body{background:#ddd;margin-top: 200px;}
div{
margin:0px auto;
width:600px;
height:40px;
text-align: center;
line-height: 40px;
}
.div1{background: rgba(83,172,150,0.2);}
.div2{background: rgba(83,172,150,0.4);}
.div3{background: rgba(83,172,150,0.6);}
.div4{background: rgba(83,172,150,0.8);}
.div5{background: rgba(83,172,150,1.0);}
/style>
/head>
body>
div>rgba透明度0.2/div>
div>rgba透明度0.4/div>
div>rgba透明度0.6/div>
div>rgba透明度0.8/div>
div>rgba透明度1.0/div>
/body>
/html>
注意事项
- 希望小编分享的原创经验对小伙伴们有所帮助，如果小伙伴们有对本经验有任何 疑问，请在下方评论处 留言讨论，小编第一时间来解答！
以上方法由办公区教程网编辑摘抄自百度经验可供大家参考！
相关文章
- 详细阅读
- 详细阅读
-
HTML5创作工具，MAKA 2.0史上最全操作指南详细阅读
HTML5创作工具，MAKA 2.0史上最全操作指南,超过15000种模板组合。还怕你没有发挥的空间吗？MAKA（中文：码卡）作为中国最早推出移动端卡片式交互模式的创新者，随着HTML5技术的日渐成熟......
2023-03-16 438 HTML
![HTML网页制作：[17]CSS常用样式字体及颜色属性](https://exp-picture.cdn.bcebos.com/ba274f598540102a99638a11b142a07aa110c5d4.jpg)