CSS

文本修饰 | text-decoration

text-decoration

text-decoration CSS属性指定文本所使用的装饰线条的外观。它是在单个声明中设置一个或更多个文字修饰值的简写形式,这些文字修饰值包括:text-decoration-linetext-decoration-colortext-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设置使用的装饰种类,如underlineline-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>

规范

SpecificationStatusComment
CSS Text Decoration Module Level 3The definition of 'text-decoration' in that specification.Candidate RecommendationTransformed 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.RecommendationNo significant changes.
CSS Level 1The definition of 'text-decoration' in that specification.RecommendationInitial definition.

浏览器兼容性

FeatureChromeFirefox (Gecko)ChromeEdgeInternet ExplorerOperaSafari
Basic support11.0 (1.7 or earlier)1.0(Yes)3.03.51.0
blink value571.0 (1.7 or earlier) 23.0 (23.0)(Yes)(Yes)1(Yes)14.0 15.01(Yes)1
Shorthand property?6.0 (6.0)3 36.0 (36.0)(Yes)No supportNo supportNo support7.12

FeatureAndroid WebviewChrome for AndroidFirefox Mobile (Gecko)AndroidEdgeIE PhoneOpera MobileSafari Mobile
Basic support(Yes)(Yes)1.0 (1.0)(Yes)(Yes)(Yes)(Yes)(Yes)
blink value57571.0 (1.7 or earlier) 23.0 (23.0)1(Yes)1(Yes)1(Yes)14.01(Yes)1
Shorthand property??6.0 (6.0)3 36.0 (36.0)?No support??81