css下划线波浪线

CSS下划线和波浪线是两种常见的页面装饰效果，它们可以为文本内容增加一些视觉上的变化，使阅读者更易于理解文本的结构和重点。

/* 下划线样式 */
.underline {
    border-bottom: 2px solid #000;
}

/* 波浪线样式 */
.wavy {
    border-bottom: 2px solid #000;
    background: linear-gradient(to right, #000 50%, transparent 50%);
    background-size: 200% 100%;
    background-position: 0 0;
    animation: wave 2s linear infinite;
}

/* 实现波浪线的动画效果 */
@keyframes wave {
    0% {
        background-position: -100% 0;
    }
    100% {
        background-position: 100% 0;
    }
} 

在上面的代码中，我们使用了两种方式实现了下划线和波浪线效果。下划线通过给元素添加底部边框实现，而波浪线则通过使用背景渐变和动画实现。在动画中，我们将背景位置从-100%移动到100%，并同时让动画无限循环。

在实际应用中，我们可以使用这些样式来修饰标题、链接、重要的句子等内容。不过需要注意的是，过度使用这些效果会给页面带来过多干扰，降低用户体验，因此需要适当控制使用情况。