一、波浪線 ，常用

.info::before {content: '';position: absolute;top: 30px;width: 100%;height: 0.25em;background:linear-gradient(135deg, transparent, transparent 45%, #008000, transparent 55%, transparent 100%),linear-gradient(45deg, transparent, transparent 45%, #008000, transparent 55%, transparent 100%);background-size: 0.5em 0.5em;background-repeat: repeat-x, repeat-x; }

顯示效果：

?

二、波浪線變形 xxx

修改div的高度和背景高度

.info::before {content: '';position: absolute;top: 30px;width: 100%;height: 0.5em;background:linear-gradient(135deg, transparent, transparent 45%, #008000, transparent 55%, transparent 100%),linear-gradient(45deg, transparent, transparent 45%, #008000, transparent 55%, transparent 100%);background-size: 0.5em 0.5em;background-repeat: repeat-x, repeat-x; }

顯示效果：

?

三、波浪線 加粗

修改div 的高度和背景高度

.info::before {content: '';position: absolute;top: 30px;width: 100%;height: 0.5em;background:linear-gradient(135deg, transparent, transparent 45%, #008000, transparent 55%, transparent 100%),linear-gradient(45deg, transparent, transparent 45%, #008000, transparent 55%, transparent 100%);background-size: 1em 1em;background-repeat: repeat-x, repeat-x; }

顯示效果：

?

更多：

HTML5 background-color和background-image問題共用問題

CSS網(wǎng)頁布局垂直居中整理

CSS3 Flex布局整理(三)-項目屬性

總結(jié)

以上是生活随笔為你收集整理的Css3实现波浪线效果1的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。