温馨提示×

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

小樊
140
2024-06-19 01:59:56
栏目: 编程语言
开发者测试专用服务器限时活动,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属性的值来控制波浪线的宽度和高度。

亿速云「云服务器」,即开即用、新一代英特尔至强铂金CPU、三副本存储NVMe SSD云盘,价格低至29元/月。点击查看>>

推荐阅读:text-decoration和text-decoration-line区别

0