box-shadow

由於本文件沒有此語言的翻譯版本,您閱讀的是英文版的內容。 幫助我們翻譯這篇文章!

box-shadow 屬性為一個逗號分隔的列表描述一個或多個的陰影效果. 這使的你能夠從幾乎任何元素的框架放入陰影. 如果一個標記了 border-radius 的元素也標記了 box shadow, 這將使得他們有相同的圓邊. 多重 box shadows 的 z-index 排序跟多重 text shadows 一樣(第一個備標記的陰影在最上面).

預設值none
Applies toall elements. It also applies to ::first-letter.
繼承與否no
Mediavisual
Computed valueany length made absolute; any specified color computed; otherwise as specified
Animation typea shadow list
Canonical orderthe unique non-ambiguous order defined by the formal grammar

Box-shadow 產生器

Interactive tool 可以產生 box-shadow.

表達式

/* 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;

參數


inset
如果未指定(默認),則假定陰影為陰影(就好像該框被提升到內容之上)。 inset關鍵字的存在將陰影更改為幀內的陰影(就好像內容在框內被壓下)。在邊框內部(甚至是透明的)繪製插入陰影,在背景上方,但在內容下方。

<offset-x> <offset-y>
這兩個 <length> 值用於設置陰影偏移量。 <offset-x>指定水平距離。負值將陰影置於元素的左側。 <offset-y>指定垂直距離。負值將陰影置於元素上方。有關可能的單位,請參見 <length>。 如果兩個值均為0,則陰影位於元素後面(如果設置了<blur-radius>和/或<spread-radius>,則可能會生成模糊效果)。

<blur-radius>
這是第三個 <length> 值。此值越大,模糊越大,陰影變得越來越大。不允許使用負值。如果未指定,則為0(陰影邊緣清晰)。

<spread-radius>
這是第四個 <length> 值。正值將導致陰影擴大並變大,負值將導致陰影縮小。如果未指定,則為0(陰影將與元素的大小相同)。

<color>
有關可能的關鍵字和符號,請參閱 <color> 值。 如果未指定,則使用的顏色取決於瀏覽器 - 它通常是 color 屬性的值,但請注意,Safari在此情況下當前繪製透明陰影。

語法

none | <shadow>#

where
<shadow> = inset? && <length>{2,4} && <color>?

where
<color> = <rgb()> | <rgba()> | <hsl()> | <hsla()> | <hex-color> | <named-color> | currentcolor | <deprecated-system-color>

where
<rgb()> = rgb( <percentage>{3} [ / <alpha-value> ]? ) | rgb( <number>{3} [ / <alpha-value> ]? ) | rgb( <percentage>#{3} , <alpha-value>? ) | rgb( <number>#{3} , <alpha-value>? )
<rgba()> = rgba( <percentage>{3} [ / <alpha-value> ]? ) | rgba( <number>{3} [ / <alpha-value> ]? ) | rgba( <percentage>#{3} , <alpha-value>? ) | rgba( <number>#{3} , <alpha-value>? )
<hsl()> = hsl( <hue> <percentage> <percentage> [ / <alpha-value> ]? ) | hsl( <hue>, <percentage>, <percentage>, <alpha-value>? )
<hsla()> = hsla( <hue> <percentage> <percentage> [ / <alpha-value> ]? ) | hsla( <hue>, <percentage>, <percentage>, <alpha-value>? )

where
<alpha-value> = <number> | <percentage>
<hue> = <number> | <angle>

範例

box-shadow: 60px -16px teal;
box-shadow: 10px 5px 5px black;
box-shadow: 3px 3px red, -1em 0 0.4em olive;
box-shadow: inset 5em 1em gold;
box-shadow: 0 0 1em gold;
box-shadow: inset 0 0 1em gold;
box-shadow: inset 0 0 1em gold, 0 0 1em red;

規範

Specification Status Comment
CSS Backgrounds and Borders Module Level 3
The definition of 'box-shadow' in that specification.
Candidate Recommendation Initial definition

瀏覽相容性

We're converting our compatibility data into a machine-readable JSON format. This compatibility table still uses the old format, because we haven't yet converted the data it contains. Find out how you can help!

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari
Basic support 10.0[1]
1.0-webkit
4.0 (2.0)[3]
3.5 (1.9.1)-moz
9.0[2] 10.5[1] 5.1[1]
3.0 -webkit
Multiple shadows 10.0
1.0-webkit
4.0 (2.0)
3.5 (1.9.1)-moz
9.0 10.5 5.1
3.0 -webkit
inset keyword 10.0
4.0-webkit
4.0 (2.0)
3.5 (1.9.1)-moz
9.0 10.5 5.1
5.0 -webkit
Spread radius 10.0
4.0-webkit
4.0 (2.0)
3.5 (1.9.1)-moz
9.0 10.5 5.1
5.0 -webkit
Feature Safari Mobile Opera Mini Opera Mobile Android
Basic support

5.0[1]
(Yes)-webkit

? (Yes)[1] (Yes)-webkit[1]
Multiple shadows 5.0
(Yes)-webkit
? ? ?
inset keyword 5.0
(Yes)-webkit
? ? ?
Spread radius 5.0
(Yes)-webkit
? ? ?

[1] Shadows affect layout in older Gecko, Presto, and WebKit; e.g. if you cast an outer shadow to a box with a width of 100%, you'll see a scrollbar.

[2] Since version 5.5, Internet Explorer supports Microsoft's DropShadow and Shadow 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 box-shadow in IE9 or later, you need to set border-collapse to separate.

[3] Gecko 13 (Firefox 13 / Thunderbird 13 / SeaMonkey 2.10) removed support for -moz-box-shadow. 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 width of 100%, you'll see a scrollbar.