1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
|
---
title: text-decoration
slug: Web/CSS/text-decoration
tags:
- 文本修饰
translation_of: Web/CSS/text-decoration
---
<div>{{ CSSRef() }}</div>
<h2 id="Summary" name="Summary">简介</h2>
<p>{{EmbedInteractiveExample("pages/css/text-decoration.html")}}</p>
<p><code>text-decoration</code> 这个 CSS 属性是用于设置文本的修饰线外观的（下划线、上划线、贯穿线/删除线 或 闪烁）它是 {{cssxref("text-decoration-line")}}, {{cssxref("text-decoration-color")}}, {{cssxref("text-decoration-style")}}, 和新出现的 {{cssxref("text-decoration-thickness")}} 属性的缩写。</p>
<p>文本修饰属性会延伸到子元素。这意味着如果祖先元素指定了文本修饰属性，子元素则不能将其删除。例如，在如下标记中<code> <p>This text has <em>some emphasized words</em> in it.</p>，应用样式</code><code>p { text-decoration: underline }</code> 会对整个段落添加下划线，此时再添加样式 <code>em { text-decoration: none }</code> 则不会引起任何改变，整个段落仍然有下划线修饰。然而，新加样式 <code>em { text-decoration: overline }</code> 则会在<em>标记的文字上再添加上这种overline样式。</p>
<h2 id="Syntax" name="Syntax">语法</h2>
<p>text-decoration属性是一种简写属性，并且可以使用普通属性三个值中的任何一个。普通属性如下：{{cssxref("text-decoration-line")}}，{{cssxref("text-decoration-color")}}和{{cssxref("text-decoration-style")}}</p>
<h3 id="值">值</h3>
<dl>
<dt>{{cssxref("text-decoration-line")}}</dt>
<dd>文本修饰的位置, 如下划线<code>underline</code>，删除线<code>line-through</code></dd>
<dt>{{cssxref("text-decoration-color")}}</dt>
<dd>文本修饰的颜色</dd>
<dt>{{cssxref("text-decoration-style")}}</dt>
<dd>文本修饰的样式, 如波浪线<code>wavy</code>实线<code>solid</code>虚线<code>dashed</code></dd>
<dt>{{cssxref("text-decoration-thickness")}}</dt>
<dd>文本修饰线的粗细</dd>
</dl>
<h3 id="语法形式">语法形式</h3>
{{csssyntax("text-decoration")}}
<h2 id="示例">示例</h2>
<pre class="brush: html"><code><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></code></pre>
<pre class="brush: css"><code>.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;
}</code>
</pre>
<h3 id="结果">结果</h3>
<p>{{EmbedLiveSample('示例','auto','280')}}</p>
<h2 id="Specifications" name="Specifications">规范</h2>
<table class="standard-table" style="height: 225px; width: 1157px;">
<thead>
<tr>
<th scope="col">规范</th>
<th scope="col">状态值</th>
<th scope="col">注解</th>
</tr>
</thead>
<tbody>
<tr>
<td>{{SpecName('CSS4 Text Decoration')}}</td>
<td>{{Spec2('CSS4 Text Decoration')}}</td>
<td>增加了 {{cssxref("text-decoration-thickness")}}; 注意这个属性还不是正式的，还没有明确。</td>
</tr>
<tr>
<td>{{ SpecName('CSS3 Text Decoration', '#text-decoration-property', 'text-decoration') }}</td>
<td>{{ Spec2('CSS3 Text Decoration') }}</td>
<td>转换为简写属性。支持{{ cssxref('text-decoration-style') }}值</td>
</tr>
<tr>
<td>{{ SpecName('CSS2.1', 'text.html#lining-striking-props', 'text-decoration') }}</td>
<td>{{ Spec2('CSS2.1') }}</td>
<td>没有显著变化</td>
</tr>
<tr>
<td>{{ SpecName('CSS1', '#text-decoration', 'text-decoration') }}</td>
<td>{{ Spec2('CSS1') }}</td>
<td>
<p>最初的规范</p>
</td>
</tr>
</tbody>
</table>
<p id="Browser_compatibility">{{cssinfo}}</p>
<h2 id="Browser_compatibility" name="Browser_compatibility">浏览器兼容性</h2>
<div class="hidden">
<p>The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
</div>
<p>{{Compat("css.properties.text-decoration")}}</p>
<h2 id="参见">参见</h2>
<ul>
<li>The individual text-decoration properties are {{cssxref("text-decoration-line")}}, {{cssxref("text-decoration-color")}}, and {{cssxref("text-decoration-style")}}.</li>
<li>The {{cssxref("list-style")}} attribute controls the appearance of items in HTML {{HTMLElement("ol")}} and {{HTMLElement("ul")}} lists.</li>
</ul>
|
