text-decoration如何實(shí)現(xiàn)波浪線效果

小樊
132
2024-06-19 01:59:56

實(shí)現(xiàn)文本波浪線效果通?？梢酝ㄟ^(guò)CSS的text-decoration屬性和偽元素來(lái)實(shí)現(xiàn)。以下是一個(gè)示例代碼：

<!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">這是一個(gè)帶波浪線的文本。</p>

</body>
</html>

在上面的示例中，我們定義了一個(gè)類名為wavy-text的元素，通過(guò)設(shè)置其position為relative，并在其::after偽元素中使用線性漸變背景實(shí)現(xiàn)了波浪線的效果。你可以調(diào)整background-size屬性的值來(lái)控制波浪線的寬度和高度。

0 踩