text-decoration如何实现波浪线效果

avatar
作者
筋斗云
阅读量:0

实现文本波浪线效果通常可以通过CSS的text-decoration属性和伪元素来实现。以下是一个示例代码:

<!DOCTYPE html> <html> <head> <style> .wavy-text {   position: relative;   text-decoration: none;   color: #333; }  .wavy-text::after {   content: '';   position: absolute;   bottom: 0;   left: 0;   width: 100%;   height: 3px;   background: linear-gradient(to right, #333 20%, transparent 20%, transparent 40%, #333 40%, #333 60%, transparent 60%, transparent 80%, #333 80%);   background-size: 30px 3px; /* 控制波浪线的宽度和高度 */ } </style> </head> <body>  <p class="wavy-text">这是一个带波浪线的文本。</p>  </body> </html> 

在上面的示例中,我们定义了一个类名为wavy-text的元素,通过设置其position为relative,并在其::after伪元素中使用线性渐变背景实现了波浪线的效果。你可以调整background-size属性的值来控制波浪线的宽度和高度。

广告一刻

为您即时展示最新活动产品广告消息,让您随时掌握产品活动新动态!