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
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
|
---
title: text-shadow
slug: Web/CSS/text-shadow
tags:
- CSS
- CSS Styles
- CSS Text Decoration
translation_of: Web/CSS/text-shadow
---
<div>{{CSSRef}}</div>
<p><code><strong>text-shadow</strong></code>为文字添加阴影。可以为文字与 {{ cssxref("text-decoration","text-decorations") }} 添加多个阴影，阴影值之间用逗号隔开。每个阴影值由元素在X和Y方向的偏移量、模糊半径和颜色值组成。</p>
<p>{{EmbedInteractiveExample("pages/css/text-shadow.html")}}</p>
<h2 id="Syntax" name="Syntax">语法</h2>
<pre class="brush: css">/* offset-x | offset-y | blur-radius | color */
text-shadow: 1px 1px 2px black;
/* color | offset-x | offset-y | blur-radius */
text-shadow: #fc0 1px 0 10px;
/* offset-x | offset-y | color */
text-shadow: 5px 5px #558abb;
/* color | offset-x | offset-y */
text-shadow: white 2px 5px;
/* offset-x | offset-y
/* Use defaults for color and blur-radius */
text-shadow: 5px 10px;
/* Global values */
text-shadow: inherit;
text-shadow: initial;
text-shadow: unset;</pre>
<p>当阴影大于一个时要用逗号区别开阴影之间的参数</p>
<p>每个阴影都有两到三个<code><length></code>参数 ， 以及一个与阴影颜色相关的<code><color></code>参数 。 前两个<code><length></code>参数，是以“文字中心”为原点的坐标轴，分别为x轴 <code><offset-x></code> 和y轴 <code><offset-y></code> 的值； 如果有第三个<code><length></code>参数，则第三个数值为形成阴影效果的半径的数值 <code><blur-radius></code> 。</p>
<p>当所给的阴影大于一个时，阴影应用的顺序为从前到后, 第一个指定的阴影在顶部.</p>
<p>这个属性同时适用于{{cssxref("::first-line")}} 以及 {{cssxref("::first-letter")}} <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-elements">伪元素</a>.</p>
<h3 id="Values" name="Values">取值</h3>
<dl>
<dt>{{cssxref("<color>")}}</dt>
<dd>可选。可以在偏移量之前或之后指定。如果没有指定颜色，则使用UA（用户代理）自行选择的颜色。 {{ note("如果想确保跨浏览器的一致性，请明确地指定一种颜色") }}</dd>
<dt><code><offset-x> <offset-y></code></dt>
<dd>必选。这些长度值指定阴影相对文字的偏移量。<code><offset-x></code> 指定水平偏移量，若是负值则阴影位于文字左边。 <code><offset-y></code> 指定垂直偏移量，若是负值则阴影位于文字上面。如果两者均为0，则阴影位于文字正后方（如果设置了<code><blur-radius> </code>则会产生模糊效果)。<br>
可用单位请查看 {{ cssxref("<length>") }}。</dd>
<dt><code><blur-radius></code></dt>
<dd>可选。这是 {{ cssxref("<length>") }} 值。如果没有指定，则默认为0。值越大，模糊半径越大，阴影也就越大越淡（wider and lighter）。</dd>
</dl>
<h3 id="形式化语法">形式化语法</h3>
{{csssyntax("text-shadow")}}
<h2 id="Examples" name="Examples">例子</h2>
<h3 id="简单的阴影">简单的阴影</h3>
<div id="Example1" style="margin: 0px; padding: 0px; border: 0px; color: rgb(77, 78, 83); font-family: 'Open Sans', Arial, sans-serif; font-size: 14px; line-height: 21px; background-color: rgb(255, 255, 255);">
<pre>.red-text-shadow {
text-shadow: red 0 -2px;
}</pre>
<div class="line-number" style="margin: 1em 0px 0px; border: 0px; position: absolute; left: 0px; right: 0px; line-height: inherit; top: 0px; background: 0px 0px;"></div>
<div class="line-number" style="margin: 1em 0px 0px; border: 0px; position: absolute; left: 0px; right: 0px; line-height: inherit; top: 19px; background: 0px 0px;"></div>
<div class="line-number" style="margin: 1em 0px 0px; border: 0px; position: absolute; left: 0px; right: 0px; line-height: inherit; top: 38px; background: 0px 0px;"></div>
<pre><p class="red-text-shadow">
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo
inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.
</p></pre>
<div class="line-number" style="margin: 1em 0px 0px; border: 0px; position: absolute; left: 0px; right: 0px; line-height: inherit; top: 0px; background: 0px 0px;"></div>
<div class="line-number" style="margin: 1em 0px 0px; border: 0px; position: absolute; left: 0px; right: 0px; line-height: inherit; top: 19px; background: 0px 0px;"></div>
<div class="line-number" style="margin: 1em 0px 0px; border: 0px; position: absolute; left: 0px; right: 0px; line-height: inherit; top: 38px; background: 0px 0px;"></div>
<div class="line-number" style="margin: 1em 0px 0px; border: 0px; position: absolute; left: 0px; right: 0px; line-height: inherit; top: 57px; background: 0px 0px;"></div>
</div>
<p>{{EmbedLiveSample('Simple_shadow', '689px', '90px')}}</p>
<h3 id="多重阴影">多重阴影</h3>
<div id="Example2">
<pre>.white-with-blue-shadow {
text-shadow: 1px 1px 2px black, 0 0 1em blue, 0 0 0.2em blue;
color: white;
font: 1.5em Georgia, "Bitstream Charter", "URW Bookman L", "Century Schoolbook L", serif;
}
</pre>
<pre><p class="white-with-blue-shadow">
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore
veritatis et quasi architecto beatae vitae dicta sunt explicabo.
</p>
</pre>
<div></div>
</div>
<p>{{EmbedLiveSample('Multiple_shadows', '689px', '180px')}}</p>
<h2 id="规范">规范</h2>
<table class="standard-table">
<thead>
<tr>
<th scope="col">Specification</th>
<th scope="col">Status</th>
<th scope="col">Comment</th>
</tr>
</thead>
<tbody>
<tr>
<td>{{SpecName('CSS3 Transitions', '#animatable-css', 'text-shadow')}}</td>
<td>{{Spec2('CSS3 Transitions')}}</td>
<td>Specifies <code>text-shadow</code> as animatable.</td>
</tr>
<tr>
<td>{{SpecName('CSS3 Text Decoration', '#text-shadow', 'text-shadow')}}</td>
<td>{{Spec2('CSS3 Text Decoration')}}</td>
<td>The CSS property <code>text-shadow</code> was <a class="external" href="http://www.w3.org/TR/2008/REC-CSS2-20080411/text.html#text-shadow-props">improperly defined in CSS2</a> and dropped in CSS2 (Level 1). The CSS Text Module Level 3 spec refined the syntax. Later it was moved to <a href="https://www.w3.org/TR/css-text-decor-3/">CSS Text Decoration Module Level 3</a>.</td>
</tr>
</tbody>
</table>
<p>{{cssinfo}}</p>
<h2 id="Browser_compatibility" name="Browser_compatibility">浏览器兼容性</h2>
<p>{{Compat("css.properties.text-shadow")}}</p>
<h2 id="See_also" name="See_also">参见</h2>
<ul>
<li><a href="https://cssgenerator.org/text-shadow-css-generator.html">Text Shadow CSS Generator</a> - An interactive text shadow CSS generator.</li>
<li>{{cssxref("box-shadow")}}</li>
<li>The {{cssxref("<color>")}} data type (for specifying the shadow color)</li>
<li><a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Applying_color">Applying color to HTML elements using CSS</a></li>
</ul>
<p>
<audio class="hidden"></audio>
</p>
<p>
<audio class="hidden"></audio>
</p>
|
