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
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
|
---
title: box-shadow
slug: Web/CSS/box-shadow
tags:
- CSS
- CSS 属性
- Reference
- shadow
- 参考
- 样式
- 阴影
translation_of: Web/CSS/box-shadow
---
<p>{{CSSRef}}</p>
<p><span class="seoSummary"><a href="/zh-CN/docs/Web/CSS">CSS</a> <code><strong>box-shadow</strong></code><strong> </strong>属性用于在元素的框架上添加阴影效果。你可以在同一个元素上设置多个阴影效果，并用逗号将他们分隔开。该属性可设置的值包括阴影的X轴偏移量、Y轴偏移量、模糊半径、扩散半径和颜色。</span></p>
<div>{{EmbedInteractiveExample("pages/css/box-shadow.html")}}</div>
<p>你几乎可以在任何元素上使用<code>box-shadow</code>来添加阴影效果。如果元素同时设置了 {{ cssxref("border-radius") }}属性 ，那么阴影也会有圆角效果。多个阴影在z轴上的顺序和多个 <a href="/zh-CN/CSS/text-shadow" title="text-shadow">text shadows</a> 规则相同(第一个阴影在最上面)。</p>
<p><a href="/zh-CN/docs/Web/CSS/CSS_Box_Model/Box-shadow_generator">Box-shadow generator</a> 是一个允许你生成 <code>box-shadow</code> 的交互式工具。</p>
<h2 id="Syntax" name="Syntax">语法</h2>
<pre class="brush: css no-line-numbers notranslate">/* x偏移量 | y偏移量 | 阴影颜色 */
box-shadow: 60px -16px teal;
/* x偏移量 | y偏移量 | 阴影模糊半径 | 阴影颜色 */
box-shadow: 10px 5px 5px black;
/* x偏移量 | y偏移量 | 阴影模糊半径 | 阴影扩散半径 | 阴影颜色 */
box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.2);
/* 插页(阴影向内) | x偏移量 | y偏移量 | 阴影颜色 */
box-shadow: inset 5em 1em gold;
/* 任意数量的阴影，以逗号分隔 */
box-shadow: 3px 3px red, -1em 0 0.4em olive;
/* 全局关键字 */
box-shadow: inherit;
box-shadow: initial;
box-shadow: unset;
</pre>
<p>向元素添加单个 box-shadow 效果时使用以下规则：</p>
<ul>
<li>当给出两个、三个或四个 <code><a href="https://wiki.developer.mozilla.org/en-US/docs/Web/CSS/length"><length></a></code>值时。
<ul>
<li>如果只给出两个值, 那么这两个值将会被当作 <code><a href="#offset-x"><offset-x><offset-y></a></code> 来解释。</li>
<li>如果给出了第三个值, 那么第三个值将会被当作<code><a href="#blur-radius"><blur-radius></a></code>解释。</li>
<li>如果给出了第四个值, 那么第四个值将会被当作<code><a href="#spread-radius"><spread-radius></a></code>来解释。</li>
</ul>
</li>
<li>可选，<code><a href="#inset">inset</a></code>关键字。</li>
<li>可选，<code><a href="#color"><color></a></code>值。</li>
</ul>
<p>若要对同一个元素添加多个阴影效果，请使用逗号将每个阴影规则分隔开。</p>
<h3 id="Values" name="Values">取值</h3>
<dl>
<dt><a name="inset"><code>inset</code></a></dt>
<dd>如果没有指定<code>inset</code>，默认阴影在边框外，即阴影向外扩散。<br>
使用 <code>inset</code> 关键字会使得阴影落在盒子内部，这样看起来就像是内容被压低了。 此时阴影会在边框之内 (即使是透明边框）、背景之上、内容之下。</dd>
<dt><a id="offset-x" name="offset-x"><code><offset-x></code> <code><offset-y></code></a></dt>
<dd>这是头两个 {{cssxref("<length>")}} 值，用来设置阴影偏移量。x,y 是按照数学二维坐标系来计算的，只不过y垂直方向向下。 <code><offset-x></code> 设置水平偏移量，正值阴影则位于元素右边，负值阴影则位于元素左边。 <code><offset-y></code> 设置垂直偏移量，正值阴影则位于元素下方，负值阴影则位于元素上方。可用单位请查看 {{cssxref("<length>")}} 。</dd>
<dd>如果两者都是0，那么阴影位于元素后面。这时如果设置了<code><blur-radius></code> 或<code><spread-radius></code> 则有模糊效果。需要考虑 <code>inset</code> </dd>
<dt><a id="blur-radius" name="blur-radius"><code><blur-radius></code></a></dt>
<dd>这是第三个 {{cssxref("<length>")}} 值。值越大，模糊面积越大，阴影就越大越淡。 不能为负值。默认为0，此时阴影边缘锐利。本规范不包括如何计算模糊半径的精确算法，但是，它详细说明如下：</dd>
</dl>
<blockquote>对于长而直的阴影边缘，它会创建一个过渡颜色用于模糊 以阴影边缘为中心、模糊半径为半径的局域，过渡颜色的范围在完整的阴影颜色到它最外面的终点的透明之间。 （译者注：对此有兴趣的可以了解下数字图像处理的模糊算法。）</blockquote>
<dl>
<dt><code><<a id="spread-radius" name="spread-radius">spread-radius</a>></code></dt>
<dd>这是第四个 {{cssxref("<length>")}} 值。取正值时，阴影扩大；取负值时，阴影收缩。默认为0，此时阴影与元素同样大。需要考虑 <code>inset</code> </dd>
<dt><code><<a id="color" name="color">color</a>></code></dt>
<dd>相关事项查看 {{cssxref("<color>")}} 。如果没有指定，则由浏览器决定——通常是{{cssxref("color")}}的值，不过目前Safari取透明。</dd>
</dl>
<h3 id="合成">合成</h3>
<p>将none看做是长度为0的列表。</p>
<p>列表中的每个阴影通过<code>color</code>组件（作为颜色），以及 x，y，blur，（合适的时候）加上spread组件（作为长度）进行合成。对于每个阴影，如果两个输入的阴影都是inset或者都不是inset，那么要添加的阴影必须考虑已存在的阴影。如果任何一对输入阴影中，一个是inset，另一个不是inset，那么整个阴影列表就是不可合成的。如果阴影列表有不同的长度，那么较短的列表会在尾部补上这类阴影：颜色透明，所有长度为0，inset还是非inset同较长的列表。</p>
<h3 id="正规文法">正规文法</h3>
<pre class="syntaxbox notranslate">{{csssyntax}}</pre>
<div class="hidden">
<p>此处应翻译为“正规文法”或“正则文法”。对此有兴趣的可以了解下 编译原理 的 “正规文法”</p>
</div>
<h2 id="例子">例子</h2>
<p>第一个例子中，包括了三种shadows，内置的阴影, 常规的下沉阴影, 和一个2个像素宽度的border式的阴影 (可以用 {{cssxref('outline')}} 来替代第三种)。</p>
<div id="Examples1">
<h3 id="HTML">HTML</h3>
<pre class="brush: html notranslate"><blockquote><q>You may shoot me with your words,<br/>
You may cut me with your eyes,<br/>
You may kill me with your hatefulness,<br/>
But still, like air, I'll rise.</q>
<p>&mdash; Maya Angelou</p>
</blockquote></pre>
<h3 id="CSS">CSS</h3>
<pre class="brush: css notranslate">blockquote {
padding: 20px;
box-shadow:
inset 0 -3em 3em rgba(0,0,0,0.1),
0 0 0 2px rgb(255,255,255),
0.3em 0.3em 1em rgba(0,0,0,0.3);
}</pre>
</div>
<p>{{EmbedLiveSample('Examples1', '300', '300')}}</p>
<div id="Examples2">
<h3 id="HTML_2">HTML</h3>
<pre class="brush: html notranslate"><div><p>Hello World</p></div></pre>
<h3 id="CSS_2">CSS</h3>
<pre class="brush: css notranslate">p {
box-shadow: 0 0 0 2em #F4AAB9,
0 0 0 4em #66CCFF;
margin: 4em;
padding:1em;
}</pre>
</div>
<p>{{EmbedLiveSample('Examples2', '300', '300')}}</p>
<p>当 <code>x-offset</code>, <code>y-offset</code>, 和 <code>blur</code> 都是0, 盒阴影将是一个四边都是一样长度的带有颜色的<code>outline</code>. 当设置了多个阴影时，阴影绘制由最后一个开始， 故第一个设置的阴影将覆盖在后设置的阴影之上. 当<code>border-radius设置为0时（也是其默认值）</code>, 阴影的四角将没有弧度. 当我们设置了<code>border-radius</code>为其他不为0的值时，阴影的四角也随之形成弧度。</p>
<p>我们通常在元素上增加一个大小为最大阴影宽度的<code>margin</code>值以保证阴影不会覆盖到相邻的元素或者覆盖到元素的<code>border</code>上. <code>box-shadow</code>属性不会影响到盒模型的构成。</p>
<h2 class="cleared" id="规范">规范</h2>
<table class="standard-table">
<thead>
<tr>
<th scope="col">规范</th>
<th scope="col">状态</th>
<th scope="col">注</th>
</tr>
</thead>
<tbody>
<tr>
<td>{{ SpecName('CSS3 Backgrounds', '#box-shadow', 'box-shadow') }}</td>
<td>{{ Spec2('CSS3 Backgrounds') }}</td>
<td>初次定义</td>
</tr>
</tbody>
</table>
<p>{{cssinfo}}</p>
<h2 id="浏览器兼容性">浏览器兼容性</h2>
<div class="hidden">此页面上的兼容性表由结构化数据生成。 如果您想为数据做出贡献，请查看https://github.com/mdn/browser-compat-data并向我们发送拉取请求。 </div>
<p>{{Compat("css.properties.box-shadow")}}</p>
<h2 id="参见">参见</h2>
<ul>
<li> {{cssxref("<color>")}} 数据类型</li>
<li>其他与color相关的属性: {{cssxref("color")}}, {{cssxref("background-color")}}, {{cssxref("border-color")}}, {{cssxref("outline-color")}}, {{cssxref("text-decoration-color")}}, {{cssxref("text-emphasis-color")}}, {{cssxref("caret-color")}}, and {{cssxref("column-rule-color")}}</li>
<li><a href="/zh-CN/docs/Web/HTML/Applying_color">使用 CSS 给 HTML 元素添加颜色</a></li>
</ul>
|
