CSS

文字装饰-线 | text-decoration-line

text-decoration-line

text-decoration-line CSS属性设置的是一种应用在元素的文本上的装饰。当一次设置多个线条装饰属性时,使用text-decoration简写属性可能会更方便。

/* 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;

Initial valuenone
Applies toall elements. It also applies to ::first-letter and ::first-line.
Inheritedno
Mediavisual
Computed valueas specified
Animation typediscrete
Canonical orderorder of appearance in the formal grammar of the values

语法

可能值

text-decoration-line属性被指定为none,或者从下面的列表中指定一个或多个以空格分隔的值。

none——不产生文字装饰。

形式语法

none | [ underline || overline || line-through || blink ]

实例

<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>

.wavy { text-decoration-line: underline; text-decoration-style: wavy; text-decoration-color: red; } .both { text-decoration-line: underline overline; }

规范

SpecificationStatusComment
CSS Text Decoration Module Level 3The definition of 'text-decoration-line' in that specification.Candidate RecommendationInitial definition. The text-decoration property is now a shorthand to define multiple related properties.

浏览器兼容性

FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support(Yes)6.0 (6.0) -moz1 36.0 (36.0)No support(Yes)7.1 -webkit
blink5726.0 (26.0)2No support44?

FeatureAndroid WebviewChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic Support(Yes)(Yes)6.0 (6.0) -moz1 36.0 (36.0)No support(Yes)8 -webkit
blink575726.0 (26.0)2No support44?