具體代碼如下

.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圖片20210706215125.png

總結

以上是生活随笔為你收集整理的html文字添加波浪线,利用css渐变给文字下方加波浪线的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。