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

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;

/* Global keywords */
box-shadow: inherit;
box-shadow: initial;
box-shadow: unset;

Specify a single box-shadow using:

To specify multiple shadows, provide a comma-separated list of shadows.

取值

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看做是长度为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

初始值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

浏览器兼容性

FeatureChromeEdgeFirefoxInternet ExplorerOperaSafari
Basic support

101

1 -webkit-

12

41

3.5 — 13 -moz-

49 -webkit-

44 -webkit- 2

93 410.51

5.11

3 -webkit-

Multiple shadows

10

1 -webkit-

12

4

3.5 — 13 -moz-

9310.5

5.1

3 -webkit-

inset

10

1 -webkit-

12

4

3.5 — 13 -moz-

9310.5

5.1

5 -webkit-

Spread radius

10

1 -webkit-

12

4

3.5 — 13 -moz-

9310.5

5.1

5 -webkit-

FeatureAndroid webviewChrome for AndroidEdge mobileFirefox for AndroidOpera AndroidiOS SafariSamsung Internet
Basic support Yes -webkit- 1 ? Yes ? Yes1

51

Yes -webkit-

?
Multiple shadows Yes -webkit- ? Yes ? Yes

5

Yes -webkit-

?
inset Yes -webkit- ? Yes ? Yes

5

Yes -webkit-

?
Spread radius Yes -webkit- ? Yes ? Yes

5

Yes -webkit-

?

1. 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.

2. 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.

3. To use box-shadow in Internet Explorer 9 or later, you must set border-collapse to separate.

4. 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)

参见

文档标签和贡献者

最后编辑者: RainSlide,