實現文本波浪線效果通常可以通過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屬性的值來控制波浪線的寬度和高度。