700字范文,内容丰富有趣,生活中的好帮手!
700字范文 > html文字添加波浪线 利用css渐变给文字下方加波浪线

html文字添加波浪线 利用css渐变给文字下方加波浪线

时间:2018-07-23 22:04:41

相关推荐

html文字添加波浪线 利用css渐变给文字下方加波浪线

具体代码如下

.wavy-line-decoration {

position: relative;

line-height: 1.5em;

}

.wavy-line-decoration::before {

content: '';

position: absolute;

bottom: -3px;

width: 100%;

height: 0.25em;

background: // 可以给同一个元素同时添加多个背景渐变图层,用逗号隔开,要编辑不同渐变图层的的background-repeat 和 background-size等同理,用逗号隔开

linear-gradient(45deg, transparent, transparent 45%,red 45%, red 55%,transparent 55%, transparent 100%),

linear-gradient(135deg, transparent, transparent 45%,red 45%, red 55%,transparent 55%, transparent 100%);

background-size: 0.5em 0.5em;

background-repeat: repeat-x, repeat-x;

}

Document

我是一些带波浪线的文字信息

呈现的效果如下图

QQ图片0706215125.png

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。