翻译正在进行中。

box-shadow 以由逗号分隔的列表来描述一个或多个阴影效果。该属性可以让几乎所有元素的边框产生阴影。如果元素同时设置了 border-radius ,阴影也会有圆角效果。多个阴影的z-ordering 和多个 text shadows 规则相同(第一个阴影在最上面)。

Box-shadow generator  是一个允许你生成 box-shadow 交互式工具。

初始值none
适用元素all elements. It also applies to ::first-letter.
是否是继承属性
适用媒体visual
计算值any length made absolute; any specified color computed; otherwise as specified
Animation typea shadow list
正规顺序the unique non-ambiguous order defined by the formal grammar

语法

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

指定单个 box-shadow 的用法:

  • 给出两个、三个或四个数字值的情况。
    • 如果只给出两个值, 这两个值将被浏览器解释为x轴上的偏移量 <offset-x> 和y轴上的偏移量 <offset-y>
    • 如果给出了第三个值, 这第三个值将被解释为模糊半径的大小 <blur-radius>
    • 如果给出了第四个值, 这第四个值将被解释为扩展半径的大小 <spread-radius>
  • 可选, 插页(阴影向内) inset
  • 可选, 颜色值 <color>

声明多个shadows时, 用逗号将shadows隔开。

取值

inset
不使用inset,默认阴影在边框外,即阴影向外扩散。
使用 inset 后,阴影在边框内(即使是透明边框),即阴影向内扩散,背景之上内容之下。
<offset-x> <offset-y>
这是头两个 <length> 值,用来设置阴影偏移量。x,y 是按照数学二维坐标系来计算的,只不过y垂直方向向下。  <offset-x> 设置水平偏移量,正值阴影则位于元素右边,负值阴影则位于元素左边。 <offset-y> 设置垂直偏移量,正值阴影则位于元素下方,负值阴影则位于元素上方。可用单位请查看 <length>
如果两者都是0,那么阴影位于元素后面。这时如果设置了<blur-radius><spread-radius> 则有模糊效果。需要考虑 inset 
<blur-radius>
这是第三个 <length> 值。值越大,模糊面积越大,阴影就越大越淡。 不能为负值。默认为0,此时阴影边缘锐利。需要考虑 inset 
<spread-radius>
这是第四个 <length> 值。取正值时,阴影扩大;取负值时,阴影收缩。默认为0,此时阴影与元素同样大。需要考虑 inset 
<color>
相关事项查看 <color> 。如果没有指定,则由浏览器决定——通常是color的值,不过目前Safari取透明。

合成

将none看做是长度为0的列表。

列表中的每个阴影通过color组件(作为颜色),以及 x,y,blur,(合适的时候)加上spread组件(作为长度)进行合成。对于每个阴影,如果两个输入的阴影都是inset或者都不是inset,那么要添加的阴影必须考虑已存在的阴影。如果任何一对输入阴影中,一个是inset,另一个不是inset,那么整个阴影列表就是不可合成的。如果阴影列表有不同的长度,那么较短的列表会在尾部补上这类阴影:颜色透明,所有长度为0,inset还是非inset同较长的列表。

正规语法

none | [inset? && [ <offset-x> <offset-y> <blur-radius>? <spread-radius>? <color>? ] ]#

例子

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;

规范

Specification Status Comment
CSS Backgrounds and Borders Module Level 3
box-shadow
Candidate Recommendation Initial definition

初始值none
适用元素all elements. It also applies to ::first-letter.
是否是继承属性
适用媒体visual
计算值any length made absolute; any specified color computed; otherwise as specified
Animation typea shadow list
正规顺序the unique non-ambiguous order defined by the formal grammar

浏览器兼容性

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidEdge MobileFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
Basic supportChrome Full support 10
Notes
Full support 10
Notes
Notes Shadows affect layout in this browser. For example, if you cast an outer shadow to a box with a width of 100%, then you'll see a scrollbar.
Full support 1
Prefixed
Prefixed Implemented with the vendor prefix: -webkit-
Edge Full support 12Firefox Full support 4
Notes
Full support 4
Notes
Notes Shadows affect layout in this browser. For example, if you cast an outer shadow to a box with a width of 100%, then you'll see a scrollbar.
No support 3.5 — 13
Prefixed
Prefixed Implemented with the vendor prefix: -moz-
Full support 49
Prefixed
Prefixed Implemented with the vendor prefix: -webkit-
Full support 44
Prefixed Disabled
Prefixed Implemented with the vendor prefix: -webkit-
Disabled From version 44: this feature is behind the layout.css.prefixes.webkit preference (needs to be set to true). To change preferences in Firefox, visit about:config.
IE Full support 9
Notes
Full support 9
Notes
Notes To use box-shadow in Internet Explorer 9 or later, you must set border-collapse to separate.
Notes 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)
Opera Full support 10.5
Notes
Full support 10.5
Notes
Notes Shadows affect layout in this browser. For example, if you cast an outer shadow to a box with a width of 100%, then you'll see a scrollbar.
Safari Full support 5.1
Notes
Full support 5.1
Notes
Notes Shadows affect layout in this browser. For example, if you cast an outer shadow to a box with a width of 100%, then you'll see a scrollbar.
Full support 3
Prefixed
Prefixed Implemented with the vendor prefix: -webkit-
WebView Android Full support Yes
Prefixed Notes
Full support Yes
Prefixed Notes
Prefixed Implemented with the vendor prefix: -webkit-
Notes Shadows affect layout in this browser. For example, if you cast an outer shadow to a box with a width of 100%, then you'll see a scrollbar.
Chrome Android ? Edge Mobile Full support YesFirefox Android ? Opera Android Full support Yes
Notes
Full support Yes
Notes
Notes Shadows affect layout in this browser. For example, if you cast an outer shadow to a box with a width of 100%, then you'll see a scrollbar.
Safari iOS Full support 5
Notes
Full support 5
Notes
Notes Shadows affect layout in this browser. For example, if you cast an outer shadow to a box with a width of 100%, then you'll see a scrollbar.
Full support Yes
Prefixed
Prefixed Implemented with the vendor prefix: -webkit-
Samsung Internet Android ?
Multiple shadowsChrome Full support 10
Full support 10
Full support 1
Prefixed
Prefixed Implemented with the vendor prefix: -webkit-
Edge Full support 12Firefox Full support 4
Full support 4
No support 3.5 — 13
Prefixed
Prefixed Implemented with the vendor prefix: -moz-
IE Full support 9
Notes
Full support 9
Notes
Notes To use box-shadow in Internet Explorer 9 or later, you must set border-collapse to separate.
Opera Full support 10.5Safari Full support 5.1
Full support 5.1
Full support 3
Prefixed
Prefixed Implemented with the vendor prefix: -webkit-
WebView Android Full support Yes
Prefixed
Full support Yes
Prefixed
Prefixed Implemented with the vendor prefix: -webkit-
Chrome Android ? Edge Mobile Full support YesFirefox Android ? Opera Android Full support YesSafari iOS Full support 5
Full support 5
Full support Yes
Prefixed
Prefixed Implemented with the vendor prefix: -webkit-
Samsung Internet Android ?
insetChrome Full support 10
Full support 10
Full support 1
Prefixed
Prefixed Implemented with the vendor prefix: -webkit-
Edge Full support 12Firefox Full support 4
Full support 4
No support 3.5 — 13
Prefixed
Prefixed Implemented with the vendor prefix: -moz-
IE Partial support 9
Notes
Partial support 9
Notes
Notes To use box-shadow in Internet Explorer 9 or later, you must set border-collapse to separate.
Notes inset must be the last keyword in the declaration.
Opera Full support 10.5Safari Full support 5.1
Full support 5.1
Full support 5
Prefixed
Prefixed Implemented with the vendor prefix: -webkit-
WebView Android Full support Yes
Prefixed
Full support Yes
Prefixed
Prefixed Implemented with the vendor prefix: -webkit-
Chrome Android ? Edge Mobile Full support YesFirefox Android ? Opera Android Full support YesSafari iOS Full support 5
Full support 5
Full support Yes
Prefixed
Prefixed Implemented with the vendor prefix: -webkit-
Samsung Internet Android ?
Spread radiusChrome Full support 10
Full support 10
Full support 1
Prefixed
Prefixed Implemented with the vendor prefix: -webkit-
Edge Full support 12Firefox Full support 4
Full support 4
No support 3.5 — 13
Prefixed
Prefixed Implemented with the vendor prefix: -moz-
IE Full support 9
Notes
Full support 9
Notes
Notes To use box-shadow in Internet Explorer 9 or later, you must set border-collapse to separate.
Opera Full support 10.5Safari Full support 5.1
Full support 5.1
Full support 5
Prefixed
Prefixed Implemented with the vendor prefix: -webkit-
WebView Android Full support Yes
Prefixed
Full support Yes
Prefixed
Prefixed Implemented with the vendor prefix: -webkit-
Chrome Android ? Edge Mobile Full support YesFirefox Android ? Opera Android Full support YesSafari iOS Full support 5
Full support 5
Full support Yes
Prefixed
Prefixed Implemented with the vendor prefix: -webkit-
Samsung Internet Android ?

Legend

Full support  
Full support
Partial support  
Partial support
Compatibility unknown  
Compatibility unknown
See implementation notes.
See implementation notes.
User must explicitly enable this feature.
User must explicitly enable this feature.
Requires a vendor prefix or different name for use.
Requires a vendor prefix or different name for use.

参见

文档标签和贡献者

最后编辑者: xlgp,