CSS上下紅色波浪線是一種常用的文本裝飾方式。這種效果可以為網(wǎng)頁增添一些活力和特色。下面我們就來介紹一下實現(xiàn)這種效果的方法。

.text{
position:relative;
}
.text::before{
content:"";
position:absolute;
left:0;
bottom:0;
height:2px;
width:100%;
background:red;
transform:translateY(50%);
z-index:-1;
-webkit-mask-image:linear-gradient(to bottom, transparent 10%, #000 90%);
}

以上是典型的CSS代碼實現(xiàn)方式。需要使用偽元素before來實現(xiàn)紅色波浪線。其中部分細(xì)節(jié)解釋如下：

1、::before ： 這是一個偽元素，用來創(chuàng)建下方波浪線。

2、 content ： 偽元素的內(nèi)容。這里為空即可。

3、position ： 相對定位。在text元素的左下角定位。

4、height ： 波浪線的高度。一般要比字體大小稍小。

5、width ： 波浪線的寬度。這里就直接設(shè)為父元素（text）的寬度了。

6、background ： 紅色背景。

7、transform ： 將波浪線向上移動50%（自身高度一半），以使波浪線形成自然的下沉感。

8、z-index ： 將波浪線放到下方。

9、-webkit-mask-image ： 這里使用漸變將波浪線形式化成“波浪”的形態(tài)。其中to bottom表示由上至下從“透明”漸變到“黑色”，同時10%與90%的參數(shù)用于調(diào)整波浪的大小和浪峰與浪谷的幅度。

以上是CSS上下紅色波浪線的實現(xiàn)方式。如果你需要這種效果，可以直接拷貝代碼應(yīng)用到自己的網(wǎng)頁中。