text-decoration-line
Baseline
Widely available
*
This feature is well established and works across many devices and browser versions. It’s been available across browsers since 2020年1月.
* Some parts of this feature may have varying levels of support.
CSS 属性 text-decoration-line 用于设置元素中的文本的修饰类型。当要设置多个线修饰属性时，用 text-decoration 简写属性会比分别写多个属性更方便。
css
/* Keyword values */
text-decoration-line: none;
text-decoration-line: underline;
text-decoration-line: overline;
text-decoration-line: line-through;
text-decoration-line: blink;
text-decoration-line: underline overline; /* Two decoration lines */
text-decoration-line: overline underline line-through; /* Multiple decoration lines */
/* Global values */
text-decoration-line: inherit;
text-decoration-line: initial;
text-decoration-line: unset;
| 初始值 | none |
|---|---|
| 适用元素 | 所有元素. It also applies to ::first-letter and ::first-line. |
| 是否是继承属性 | 否 |
| 计算值 | as specified |
| 动画类型 | 离散值 |
语法
值
text-decoration-line 属性可以设置为 none, 或者一个及多个用空格分隔的下列值。
形式语法
text-decoration-line =
none |
[ underline || overline || line-through || blink ] |
spelling-error |
grammar-error
示例
html
<p class="wavy">Here's some text with wavy red underline!</p>
<p class="both">This text has lines both above and below it.</p>
css
.wavy {
text-decoration-line: underline;
text-decoration-style: wavy;
text-decoration-color: red;
}
.both {
text-decoration-line: underline overline;
}
规范
| Specification |
|---|
| CSS Text Decoration Module Level 3 # text-decoration-line-property |
浏览器兼容性
Loading…
参见
- 当要设置多个线修饰属性时，用
text-decoration简写属性会比分别写多个属性更方便。