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
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
|
---
title: box-shadow
slug: Web/CSS/box-shadow
tags:
- CSS
- CSS Backgrounds and Borders
- CSS Property
- CSS Styles
- HTML Colors
- Reference
- Shadows
- Styles
- Styling HTML
- box-shadow
translation_of: Web/CSS/box-shadow
---
<p>{{CSSRef}}</p>
<p><span class="seoSummary"><code>box-shadow</code> 屬性為一個逗號分隔的列表描述一個或多個的陰影效果.</span> 這使的你能夠從幾乎任何元素的框架放入陰影. 如果一個標記了 {{cssxref("border-radius")}} 的元素也標記了 box shadow, 這將使得他們有相同的圓邊. 多重 box shadows 的 z-index 排序跟多重 <a href="/en-US/CSS/text-shadow">text shadows</a> 一樣(第一個備標記的陰影在最上面).</p>
<p>{{cssinfo}}</p>
<h3 id="Box-shadow_產生器"><strong>Box-shadow 產生器</strong></h3>
<p><a href="/en-US/docs/Web/CSS/Tools/Box-shadow_generator">Interactive tool</a> 可以產生 box-shadow.</p>
<h2 id="表達式">表達式</h2>
<pre class="brush: css notranslate">/* offset-x | offset-y | color */
box-shadow: 60px -16px teal;
/* offset-x | offset-y | blur-radius | color */
box-shadow: 10px 5px 5px black;
/* offset-x | offset-y | blur-radius | spread-radius | color */
box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.2);
/* inset | offset-x | offset-y | color */
box-shadow: inset 5em 1em gold;
/* Any number of shadows, separated by commas */
box-shadow: 3px 3px red, -1em 0 0.4em olive;
</pre>
<h3 id="參數">參數</h3>
<dl>
<dd><br>
<code>inset</code><br>
如果未指定（默認），則假定陰影為陰影（就好像該框被提升到內容之上）。 inset關鍵字的存在將陰影更改為幀內的陰影（就好像內容在框內被壓下）。在邊框內部（甚至是透明的）繪製插入陰影，在背景上方，但在內容下方。<br>
<br>
<code><offset-x> <offset-y> </code><br>
這兩個 {{cssxref("<length>")}} 值用於設置陰影偏移量。 <offset-x>指定水平距離。負值將陰影置於元素的左側。 <offset-y>指定垂直距離。負值將陰影置於元素上方。有關可能的單位，請參見 {{cssxref("<length>")}}。 如果兩個值均為0，則陰影位於元素後面（如果設置了<blur-radius>和/或<spread-radius>，則可能會生成模糊效果）。<br>
<br>
<code><blur-radius> </code><br>
這是第三個 {{cssxref("<length>")}} 值。此值越大，模糊越大，陰影變得越來越大。不允許使用負值。如果未指定，則為0（陰影邊緣清晰）。<br>
<br>
<<code>spread-radius</code>><br>
這是第四個 {{cssxref("<length>")}} 值。正值將導致陰影擴大並變大，負值將導致陰影縮小。如果未指定，則為0（陰影將與元素的大小相同）。<br>
<br>
<<code>color</code>><br>
有關可能的關鍵字和符號，請參閱 {{cssxref("<color>")}} 值。 如果未指定，則使用的顏色取決於瀏覽器 - 它通常是 {{cssxref("color")}} 屬性的值，但請注意，Safari在此情況下當前繪製透明陰影。</dd>
</dl>
<h3 id="語法">語法</h3>
{{csssyntax}}
<h2 id="範例">範例</h2>
<ul>
<li><a href="https://techmoon.xyz/css-box-shadow-examples-by-css-scan/">CSS box-shadow examples</a></li>
<li><a href="http://www.elektronotdienst-nuernberg.de/bugs/box-shadow_inset.html">box-shadow test</a></li>
<li><a href="http://markusstange.wordpress.com/2009/02/15/fun-with-box-shadows/">box-shadow tutorial and examples</a></li>
</ul>
<pre class="notranslate">box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
</pre>
<pre class="notranslate">box-shadow: 60px -16px teal;</pre>
<pre class="notranslate">box-shadow: 10px 5px 5px black;</pre>
<pre class="notranslate">box-shadow: 3px 3px red, -1em 0 0.4em olive;</pre>
<pre class="notranslate">box-shadow: inset 5em 1em gold;</pre>
<pre class="notranslate">box-shadow: 0 0 1em gold;</pre>
<pre class="notranslate">box-shadow: inset 0 0 1em gold;</pre>
<pre class="notranslate">box-shadow: inset 0 0 1em gold, 0 0 1em red;</pre>
<h2 class="cleared" 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 Backgrounds', '#box-shadow', 'box-shadow')}}</td>
<td>{{Spec2('CSS3 Backgrounds')}}</td>
<td>Initial definition</td>
</tr>
</tbody>
</table>
<h2 id="瀏覽相容性">瀏覽相容性</h2>
<p>{{CompatibilityTable}}</p>
<div id="compat-desktop">
<table class="compat-table">
<tbody>
<tr>
<th>Feature</th>
<th>Chrome</th>
<th>Firefox (Gecko)</th>
<th>Internet Explorer</th>
<th>Opera</th>
<th>Safari</th>
</tr>
<tr>
<td>Basic support</td>
<td>10.0<sup>[1]</sup><br>
1.0{{property_prefix("-webkit")}}</td>
<td>{{CompatGeckoDesktop("2.0")}}<sup>[3]</sup><br>
{{CompatGeckoDesktop("1.9.1")}}{{property_prefix("-moz")}}</td>
<td>9.0<sup>[2]</sup></td>
<td>10.5<sup>[1]</sup></td>
<td>5.1<sup>[1]</sup><br>
3.0 {{property_prefix("-webkit")}}</td>
</tr>
<tr>
<td>Multiple shadows</td>
<td>10.0<br>
1.0{{property_prefix("-webkit")}}</td>
<td>{{CompatGeckoDesktop("2.0")}}<br>
{{CompatGeckoDesktop("1.9.1")}}{{property_prefix("-moz")}}</td>
<td>9.0</td>
<td>10.5</td>
<td>5.1<br>
3.0 {{property_prefix("-webkit")}}</td>
</tr>
<tr>
<td><code>inset</code> keyword</td>
<td>10.0<br>
4.0{{property_prefix("-webkit")}}</td>
<td>{{CompatGeckoDesktop("2.0")}}<br>
{{CompatGeckoDesktop("1.9.1")}}{{property_prefix("-moz")}}</td>
<td>9.0</td>
<td>10.5</td>
<td>5.1<br>
5.0 {{property_prefix("-webkit")}}</td>
</tr>
<tr>
<td>Spread radius</td>
<td>10.0<br>
4.0{{property_prefix("-webkit")}}</td>
<td>{{CompatGeckoDesktop("2.0")}}<br>
{{CompatGeckoDesktop("1.9.1")}}{{property_prefix("-moz")}}</td>
<td>9.0</td>
<td>10.5</td>
<td>5.1<br>
5.0 {{property_prefix("-webkit")}}</td>
</tr>
</tbody>
</table>
</div>
<div id="compat-mobile">
<table class="compat-table">
<tbody>
<tr>
<th>Feature</th>
<th>Safari Mobile</th>
<th>Opera Mini</th>
<th>Opera Mobile</th>
<th>Android</th>
</tr>
<tr>
<td>Basic support</td>
<td>
<p>5.0<sup>[1]</sup><br>
{{CompatVersionUnknown }}{{ property_prefix("-webkit")}}</p>
</td>
<td>{{CompatUnknown}}</td>
<td>{{CompatVersionUnknown }}<sup>[1]</sup></td>
<td>{{CompatVersionUnknown }}{{property_prefix("-webkit")}}<sup>[1]</sup></td>
</tr>
<tr>
<td>Multiple shadows</td>
<td>5.0<br>
{{CompatVersionUnknown }}{{ property_prefix("-webkit")}}</td>
<td>{{CompatUnknown}}</td>
<td>{{CompatUnknown}}</td>
<td>{{CompatUnknown}}</td>
</tr>
<tr>
<td><code>inset</code> keyword</td>
<td>5.0<br>
{{CompatVersionUnknown }}{{ property_prefix("-webkit")}}</td>
<td>{{CompatUnknown}}</td>
<td>{{CompatUnknown}}</td>
<td>{{CompatUnknown}}</td>
</tr>
<tr>
<td>Spread radius</td>
<td>5.0<br>
{{CompatVersionUnknown }}{{ property_prefix("-webkit")}}</td>
<td>{{CompatUnknown}}</td>
<td>{{CompatUnknown}}</td>
<td>{{CompatUnknown}}</td>
</tr>
</tbody>
</table>
</div>
<p>[1] Shadows affect layout in older Gecko, Presto, and WebKit; e.g. if you cast an outer shadow to a box with a <code>width</code> of <code>100%</code>, you'll see a scrollbar.</p>
<p>[2] Since version 5.5, Internet Explorer supports Microsoft's <a href="http://msdn.microsoft.com/en-us/library/ms532985%28VS.85,loband%29.aspx">DropShadow</a> and <a href="http://msdn.microsoft.com/en-us/library/ms533086%28VS.85,loband%29.aspx">Shadow</a> Filter. You can use this proprietary extension to cast a drop shadow (though the syntax and the effect are different from CSS3). In order to get <code>box-shadow</code> in IE9 or later, you need to set {{cssxref("border-collapse")}} to <code>separate</code>.</p>
<p>[3] Gecko 13 {{geckoRelease(13)}} removed support for <code>-moz-box-shadow</code>. Since then, only the unprefixed version is supported. Shadows affect layout in older Gecko, Presto, and WebKit; e.g. if you cast an outer shadow to a box with a <code>width</code> of <code>100%</code>, you'll see a scrollbar.</p>
|
