CSS 文本装饰

CSS 文本装饰（text decoration）模块定义了与文本装饰相关的特性，如下划线、文本阴影和强调标记等。

参考

属性

该规范还定义了 text-decoration-skip-box、text-decoration-skip-self、text-decoration-skip-spaces、text-decoration-trim 和 text-emphasis-skip 属性，但目前尚未被任何浏览器支持。

示例

css

.under {
  text-decoration: underline red;
}

.over {
  text-decoration: wavy overline lime;
}

.line {
  text-decoration: line-through;
}

.plain {
  text-decoration: none;
}

.underover {
  text-decoration: dashed underline overline;
}

.thick {
  text-decoration: solid underline purple 4px;
}

.blink {
  text-decoration: blink;
}

html

<p class="under">这段文字下方有一条线。</p>
<p class="over">这段文字上方有一条线。</p>
<p class="line">这段文字中间有一条贯穿线。</p>
<p>
  这个
  <a class="plain" href="#">链接将不会显示下划线</a
  >，而链接通常默认是带有下划线的。在为超链接移除文字装饰时请格外小心，因为用户通常依赖下划线来识别超链接。
</p>
<p class="underover">这段文字上方<em>和</em>下方都有线。</p>
<p class="thick">在支持的浏览器中，这段文字下方会有一条非常粗的紫色下划线。</p>
<p class="blink">根据你使用的浏览器，这段文字可能会闪烁。</p>

规范

Specification
CSS Text Decoration Module Level 3
CSS Text Decoration Module Level 4

参考

属性

示例

规范

参见