css设置边框波浪线方法。很多网页为了区分层级关系，创建了波浪的边框来增加网页的美观，这些网页都是用CSS实现的，而不是用图片实现的，这里我们需要利用到线性渐变的方法来创建这个波浪形，并且以锯齿形作为示范。
工具/原料
1
chrome浏览器
2
sublime text3编辑器
方法/步骤
1
打开sublime text3编辑器，新建一个html文档，并且建立基本的框架。
2
创建css文档，并且与HTML进行连接。
3body { margin: 0; padding: 0; background: lightblue;} .zigzag { position: absolute; top: 50%; width: 100%; height: 50%; background: #fff;} 创建一个背景颜色，并且在创建一个白色区域。
4
.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% );}这里使用伪元素before进行设置，插入有渐变颜色的形状。
5
background-size: 30px 60px;加上尺寸进行图形的分割。
6
linear-gradient( 45deg, transparent 33.33%, lightblue 33.33%, lightblue 66.66%, transparent 66.66% );增加正45度角的三角形。
7
transform: rotateX(180deg)对三角形进行旋转，这个时候就有波浪显现了。
注意事项
主要的方法是利用渐变颜色的特性来创造
上一篇：css 怎么消除最后一个右边距
下一篇：CSS样式的CSS规则定义译文