MDN wants to learn about developers like you: https://qsurvey.mozilla.com/s3/MDN-survey

这篇翻译不完整。请帮忙从英语翻译这篇文章

摘要

 

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

语法

/* 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>11
这是第四个 <length> 值。取正值时,阴影扩大;取负值时,阴影.收缩。默认为0,此时阴影与元素同样大。
<color>
相关事项查看 <color> 。如果没有指定,则由浏览器决定——通常是color的值,不过目前Safari取透明。

合成

列表中的每个阴影(将none看做是长度为0的列表)通过颜色组件(作为颜色),以及 x,y,blur,(合适的时候)加上spread组件(作为长度)进行合成。对于每个阴影,如果两个输入的阴影都是inset或者都不是inset,那么合成的阴影是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

浏览器兼容性

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 (WebKit 534)
3.0 (WebKit 522)-webkit
inset keyword 10.0
4.0-webkit
4.0 (2.0)
3.5 (1.9.1)-moz
9.0 10.5 5.1 (WebKit 534)
5.0 (WebKit 533)-webkit
Spread radius 10.0
4.0-webkit
4.0 (2.0)
3.5 (1.9.1)-moz
9.0 10.5 5.1 (WebKit 534)
5.0 (WebKit 533)-webkit
Feature Safari Mobile Opera Mini Opera Mobile Android Browser
Basic support

5.0[1]
(Yes)-webkit

? ? (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.

文档标签和贡献者

 最后编辑者: XiaoLe,