文字装饰-线 | 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 value | none |
---|---|
Applies to | all elements. It also applies to ::first-letter and ::first-line. |
Inherited | no |
Media | visual |
Computed value | as specified |
Animation type | discrete |
Canonical order | order 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;
}
规范
Specification | Status | Comment |
---|---|---|
CSS Text Decoration Module Level 3The definition of 'text-decoration-line' in that specification. | Candidate Recommendation | Initial definition. The text-decoration property is now a shorthand to define multiple related properties. |
浏览器兼容性
Feature | Chrome | Firefox (Gecko) | Internet Explorer | Opera | Safari |
---|---|---|---|---|---|
Basic support | (Yes) | 6.0 (6.0) -moz1 36.0 (36.0) | No support | (Yes) | 7.1 -webkit |
blink | 57 | 26.0 (26.0)2 | No support | 44 | ? |
Feature | Android Webview | Chrome for Android | Firefox Mobile (Gecko) | IE Mobile | Opera Mobile | Safari Mobile |
---|---|---|---|---|---|---|
Basic Support | (Yes) | (Yes) | 6.0 (6.0) -moz1 36.0 (36.0) | No support | (Yes) | 8 -webkit |
blink | 57 | 57 | 26.0 (26.0)2 | No support | 44 | ? |