文本修饰 | text-decoration
text-decoration
text-decoration
CSS属性指定文本所使用的装饰线条的外观。它是在单个声明中设置一个或更多个文字修饰值的简写形式,这些文字修饰值包括:text-decoration-line
,text-decoration-color
和text-decoration-style
。
/* Keyword values */
text-decoration: none; /* No text decoration */
text-decoration: underline red; /* Red underlining */
text-decoration: underline wavy red; /* Red wavy underlining */
/* Global values */
text-decoration: inherit;
text-decoration: initial;
text-decoration: unset;
文字装饰是会传递到后代节点中的。这意味着如果一个元素指定了一个文本修饰方式,那么它的子元素则不能删除该修饰。例如,在标记<p>This text has <em>some emphasized words</em> in it.</p>中,样式规则p { text-decoration: underline; }会导致整个段落被加下划线。样式规则em { text-decoration: none; }不会导致任何改变,整个段落仍然会被强调。但是,这个规则em { text-decoration: overline; }会导致第二个装饰出现在“一些强调的语句”上。
初始值 | as each of the properties of the shorthand: text-decoration-color: currentcolor text-decoration-style: solid text-decoration-line: none |
---|---|
应用范围 | all elements. It also applies to ::first-letter and ::first-line. |
是否继承 | no |
使用媒体 | visual |
计算值 | as each of the properties of the shorthand: text-decoration-line: as specified text-decoration-style: as specified text-decoration-color: computed color |
动画类型 | as each of the properties of the shorthand: text-decoration-color: a color text-decoration-style: discrete text-decoration-line: discrete |
规范顺序 | order of appearance in the formal grammar of the values |
text-decoration-color
:currentcolor
text-decoration-style
:solid
text-decoration-line
:none
Applies to all elements. It also applies to [`::first-letter`](::first-letter) and [`::first-line`](::first-line). [Inherited](inheritance) no Media visual [Computed value](computed_value) as each of the properties of the shorthand:
text-decoration-line
: 指定值
text-decoration-style
:指定值
text-decoration-color
:颜色数值
动画类型作为简写的每个属性:
text-decoration-color
:一种颜色
text-decoration-style
:discrete
text-decoration-line
:discrete
出现在规则语法中的规范顺序
语法
该text-decoration
属性的赋值为以一个或多个以空格分隔的各种文本修饰属性值。
可能值
text-decoration-line
设置使用的装饰种类,如underline
或line-through
。
形式语法
<'text-decoration-line'> || <'text-decoration-style'> || <'text-decoration-color'>
实例
.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;
}
.blink {
text-decoration: blink;
}
<p class="under">This text has a line underneath it.</p>
<p class="over">This text has a line over it.</p>
<p class="line">This text has a line going through it.</p>
<p>This <a class="plain" href="#">link will not be underlined</a>,
as links generally are by default. Be careful with removing
the text decoration on anchors since users often depend on
the underline to denote hyperlinks.</p>
<p class="underover">This text has lines above <em>and</em> below it.</p>
<p class="blink">This text might blink for you,
depending on the browser you use.</p>
规范
Specification | Status | Comment |
---|---|---|
CSS Text Decoration Module Level 3The definition of 'text-decoration' in that specification. | Candidate Recommendation | Transformed into a shorthand property. Added support for the value of text-decoration-style. |
CSS Level 2 (Revision 1)The definition of 'text-decoration' in that specification. | Recommendation | No significant changes. |
CSS Level 1The definition of 'text-decoration' in that specification. | Recommendation | Initial definition. |
浏览器兼容性
Feature | Chrome | Firefox (Gecko) | Chrome | Edge | Internet Explorer | Opera | Safari |
---|---|---|---|---|---|---|---|
Basic support | 1 | 1.0 (1.7 or earlier) | 1.0 | (Yes) | 3.0 | 3.5 | 1.0 |
blink value | 57 | 1.0 (1.7 or earlier) 23.0 (23.0) | (Yes) | (Yes)1 | (Yes)1 | 4.0 15.01 | (Yes)1 |
Shorthand property | ? | 6.0 (6.0)3 36.0 (36.0) | (Yes) | No support | No support | No support | 7.12 |
Feature | Android Webview | Chrome for Android | Firefox Mobile (Gecko) | Android | Edge | IE Phone | Opera Mobile | Safari Mobile |
---|---|---|---|---|---|---|---|---|
Basic support | (Yes) | (Yes) | 1.0 (1.0) | (Yes) | (Yes) | (Yes) | (Yes) | (Yes) |
blink value | 57 | 57 | 1.0 (1.7 or earlier) 23.0 (23.0)1 | (Yes)1 | (Yes)1 | (Yes)1 | 4.01 | (Yes)1 |
Shorthand property | ? | ? | 6.0 (6.0)3 36.0 (36.0) | ? | No support | ? | ? | 81 |