CSS：边框虚线、文本下划波浪线

作者：System 时间：2024年08月09日分类：所有,css 字数：506

CSS中创建虚线边框和文本下划波浪线的代码示例如下：

虚线边框:




.dashed-border {
  border: 1px dashed #000; /* 1px点线，黑色 */
}

HTML中使用：




<div class="dashed-border">这是一个虚线边框容器</div>

文本下划波浪线:




.text-underline {
  text-decoration: underline; /* 下划线 */
  text-decoration-style: wave; /* 波浪形下划线 */
  text-decoration-color: #00f; /* 下划线颜色 */
}

HTML中使用：




<p class="text-underline">这是带有波浪线下划线的文本</p>

注意：text-decoration-style 的 wave 值可能不被所有浏览器支持，因此可能不会显示波浪形下划线效果。