首页 > 代码库 > box-shadow参数以及使用

box-shadow参数以及使用

参数:box-shadow:none | [inset  x-offset y-offset blur-radius spread-radius color], [inset  x-offset y-offset blur-radius spread-radius color] 

text-shadow 的用法和box-shadow一样。。。。

box-shadow属性可以使用一个或多个投影,如果使用多个投影时必须使用逗号“,”隔开。

例如:

div
{
width:300px;
height:100px;

-moz-box-shadow: 10px 10px 5px #888888; /* 老的 Firefox */
box-shadow: 10px 10px 5px #888888;
}

表明:颜色为#888888的阴影向下向右外面偏移,模糊为5像素



其中的参数说明如下:


none:默认值,元素没有任何阴影效果。


inset:阴影类型,可选值。如果不设置,其默认的投影方式是外阴影;如果取其唯一值“inset”,就是给元素设置内阴影。


x-offset:阴影水平偏移量,其值可以是正负值。如果取正值,则阴影在元素的右边,反之取负值,阴影在元素的左边。


y-offset:阴影垂直偏移量,其值可以是正负值。如果取正值,则阴影在元素的底部,反之取负值,阴影在元素的顶部。


blur-radius:阴影模糊半径,可选参数。其值只能是正值,如果取值为“0”时,表示阴影不具有模糊效果,如果取值越大,阴影的边缘就越模糊。


spread-radius:阴影扩展半径,可选参数。其值可以是正负值,如果取值为正值,则整个阴影都延展扩大,反之取值为负值,则整个阴影都缩小。


color:阴影颜色,可选参数,如果不设定任何颜色时,浏览器会取默认色,但各浏览器默认色不一样,特别是在Webkit内核下的浏览器将无色,也就是透明,建议不要省略这个参数。
 
 

box-shadow参数以及使用