Box Shadow:图层阴影效果。
目前支持的浏览器有:Firefox 3.5+、Chrome 4.0+、Safari 3.1+、Opear 10.5+。
Firefox支持的私有属性:-moz-box-shadow;
webkit内核的Safari和Chrome支持的私有属性:-webkit-box-shadow;
Opera支持的属性:box-shadow。
基本用法:
box-shadow一共包含6个值:阴影类型、X轴位移、Y轴位移、阴影模糊度、阴影扩展、阴影颜色。
其中阴影类型指的是内阴影(inset)和外阴影,不写默认为外阴影。
例1:外阴影,X轴位移向左10px,Y轴位移向下10px,模糊度为5px,没有扩散,颜色为#000。
-webkit-box-shadow:10px 10px 5px #000;
-moz-box-shadow:10px 10px 5px #000;
box-shadow:10px 10px 5px #000;
例2:内阴影,没有位移,模糊度5px,没有扩散,颜色为#000。
-webkit-box-shadow:inset 0 0 20px #000;
-moz-box-shadow:inset 0 0 20px #000;
box-shadow:inset 0 0 20px #000;
例3:多重阴影,一个内阴影,四边各一个外阴影。(代码中间用半角逗号隔开)
-webkit-box-shadow:inset 0 0 20px #6f4,0 -10px 5px #d4e,10px 0 5px #6fc,0 10px 5px #234,-10px 0 5px #4ac;
-moz-box-shadow:inset 0 0 20px #6f4,0 -10px 5px #d4e,10px 0 5px #6fc,0 10px 5px #234,-10px 0 5px #4ac;
box-shadow:inset 0 0 20px #6f4,0 -10px 5px #d4e,10px 0 5px #6fc,0 10px 5px #234,-10px 0 5px #4ac;
注:当给同一个元素使用多个阴影属性时,需要注意它的顺序,最先写的阴影将显示在最顶层。