box-shadow

摘要

box-shadow 以逗号分割列表来描述一个或多个阴影效果,可以用到几乎任何元素上。 如果元素同时设置了 border-radius ,阴影也会有圆角效果。多个阴影的z-ordering 和多个 text shadows 规则相同(第一个阴影在最上面)。

语法

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

浏览器兼容性

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari
Basic support 10.0
1.0-webkit
4.0 (2.0)
3.5 (1.9.1)-moz
9.0 (See note) 10.5 5.1 (WebKit 534)
3.0 (WebKit 522)-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 iOS Safari Opera Mini Opera Mobile Android Browser
Basic support

5.0
(Yes)-webkit

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

备注

  • 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).
  • 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.
  • Gecko 13 (Firefox 13) removed support for -moz-box-shadow. Since then, only the unprefixed version is supported.
  • In order to get box-shadow in IE9 or later, you need to set border-collapse to separate.

文档标签和贡献者

向此页面作出贡献: FredWe, teoli, luomingzhong, yan, ethertank, guirong
最后编辑者: FredWe,