本文摘自PHP中文网,作者藏色散人,侵删。
css实现波浪边框的方法:首先新建一个div,并给它一个类名;然后设置一个背景颜色,并将div设为白色;接着使用伪元素before进行设置,并插入有渐变颜色的形状;最后加上尺寸进行图形的分割,并增加三角形实现波浪效果即可。
本教程操作环境:Dell G3电脑、Windows7系统、HTML5&&CSS3版本。
推荐:《css视频教程》
波浪的边框css的实现
1、新建一个div,并给它一个类名
1 | <div class = "zigzag" ></div>
|
2、设置一个背景颜色,并将div设为白色
1 2 3 4 5 6 7 8 9 10 11 12 | body {
margin: 0;
padding: 0;
background: lightblue;
}
.zigzag {
position: absolute;
top: 50%;
width: 100%;
height: 50%;
background: #fff;
}
|
3、这里使用伪元素before进行设置,插入有渐变颜色的形状。
1 2 3 4 5 6 7 8 9 10 11 12 13 | .zigzag:before
{
content: '' ;
position: absolute;
width: 100%;
height: 20px;
display: block;
background: linear-gradient(
-45deg, transparent 33.33%,
lightblue 33.33%, lightblue 66.66%,
transparent 66.66%
);
}
|
阅读剩余部分
相关阅读 >>
设置div的宽度可以通过css的什么属性
css怎么设置内边距
css after是什么
css怎么设置鼠标变背景
css opacity属性怎么用
10个 你可能不熟悉的 css伪类 及其用例介绍
html如何让链接不变色
css实现简单的选项卡切换效果(附代码)
如何使用纯css实现圆形图像?
css垂直对齐不起作用的原因及解决方法
更多相关阅读请进入《css》频道 >>
人民邮电出版社
本书对 Vue.js 3 技术细节的分析非常可靠,对于需要深入理解 Vue.js 3 的用户会有很大的帮助。——尤雨溪,Vue.js作者
转载请注明出处:木庄网络博客 » 波浪的边框css怎么实现