首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

文本修饰 | text-decoration

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

代码语言:javascript
复制
/* 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

代码语言:txt
复制
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:颜色数值
代码语言:javascript
复制
动画类型作为简写的每个属性:
  • text-decoration-color:一种颜色
  • text-decoration-style:discrete
  • text-decoration-line:discrete
代码语言:javascript
复制
出现在规则语法中的规范顺序 

语法

text-decoration属性的赋值为以一个或多个以空格分隔的各种文本修饰属性值。

可能值

text-decoration-line设置使用的装饰种类,如underlineline-through

text-decoration-color设置装饰的颜色。

text-decoration-style设置用于装饰的线条的风格,比如solidwavydashed

形式语法

代码语言:javascript
复制
<'text-decoration-line'> || <'text-decoration-style'> || <'text-decoration-color'>

实例

代码语言:javascript
复制
.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;
}
代码语言:javascript
复制
<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

扫码关注腾讯云开发者

领取腾讯云代金券