[分享]css下划线样式设置

CSS 下划线样式是网页设计中常用的一种样式设置方式。下面介绍几种设置下划线的方式。/ 实线下划线样式 / .text { textdecoration: underline; } / 虚线下划线样式...

CSS 下划线样式是网页设计中常用的一种样式设置方式。下面介绍几种设置下划线的方式。

/* 实线下划线样式 */
.text {
  text-decoration: underline;
}

/* 虚线下划线样式 */
.text {
  text-decoration: underline dotted;
}

/* 双下划线样式 */
.text {
  text-decoration: underline double;
}

/* 点线下划线样式 */
.text {
  text-decoration: underline wavy;
}

/* 自定义下划线样式 */
.text {
  background-image: linear-gradient(to bottom, #f0f, #f0f);
  background-repeat: repeat-x;
  -webkit-background-size: 100% 5px;
  background-size: 100% 5px;
  background-position: bottom left;
  text-decoration: none;
  -webkit-text-decoration: underline;
  text-decoration-color: transparent;
  -webkit-text-decoration-color: transparent;
} 

在以上例子中，.text 代表一个文本元素。不同的 text-decoration 属性值可以设置不同的下划线样式。自定义下划线样式使用了背景图像和重复线性渐变的方式来实现。