text-decoration
简介
尝试一下
text-decoration
这个 CSS 属性是用于设置文本的修饰线外观的(下划线、上划线、贯穿线/删除线 或 闪烁)它是 text-decoration-line
, text-decoration-color
, text-decoration-style
, 和新出现的 text-decoration-thickness
属性的缩写。
文本修饰属性会延伸到子元素。这意味着如果祖先元素指定了文本修饰属性,子元素则不能将其删除。例如,在如下标记中 <p>This text has <em>some emphasized words</em> in it.</p>
,应用样式 p { text-decoration: underline }
会对整个段落添加下划线,此时再添加样式 em { text-decoration: none }
则不会引起任何改变,整个段落仍然有下划线修饰。然而,新加样式 em { text-decoration: overline }
则会在<em>标记的文字上再添加上这种 overline 样式。
语法
text-decoration 属性是一种简写属性,并且可以使用普通属性三个值中的任何一个。普通属性如下:text-decoration-line
,text-decoration-color
和text-decoration-style
值
text-decoration-line
-
文本修饰的位置,如下划线
underline
,删除线line-through
text-decoration-color
-
文本修饰的颜色
text-decoration-style
-
文本修饰的样式,如波浪线
wavy
实线solid
虚线dashed
text-decoration-thickness
-
文本修饰线的粗细
语法形式
示例
<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 when 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>
.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;
}
结果
规范
Specification |
---|
CSS Text Decoration Module Level 3 # text-decoration-property |
初始值 | as each of the properties of the shorthand:
|
---|---|
适用元素 | all elements. It also applies to ::first-letter and ::first-line . |
是否是继承属性 | 否 |
计算值 | as each of the properties of the shorthand:
|
Animation type | as each of the properties of the shorthand:
|
浏览器兼容性
BCD tables only load in the browser
参见
- The individual text-decoration properties are
text-decoration-line
,text-decoration-color
, andtext-decoration-style
. - The
list-style
attribute controls the appearance of items in HTML<ol>
and<ul>
lists.