box-shadow

一、什么是box-shadow？怎么使用

1.text-shadow是给文本添加阴影效果，box-shadow是给元素块添加周边阴影效果。

基本语法是{box-shadow:[inset] x-offset y-offset blur-radius spread-radius color}

                {box-shadow:[投影方式] X轴偏移量 Y轴偏移量阴影模糊半径 阴影扩展半径 阴影颜色}

 

2.参数说明

• 阴影类型：此参数可选。如不设值，默认投影方式是外阴影；如取其唯一值“inset”，其投影为内阴影；

• X-offset:阴影水平偏移量，其值可以是正负值。如果值为正值，则阴影在对象的右边，其值为负值时，阴影在对象的左边；

• Y-offset:阴影垂直偏移量，其值也可以是正负值。如果为正值，阴影在对象的底部，其值为负值时，阴影在对象的顶部；

如果xy都不取值，就从边框开始

• 阴影模糊半径：此参数可选，，但其值只能是为正值，如果其值为0时，表示阴影不具有模糊效果，其值越大阴影的边缘就越模糊；

• 阴影扩展半径：此参数可选，其值可以是正负值，如果值为正，则整个阴影都延展扩大，反之值为负值时，则缩小；

• 阴影颜色：此参数可选。如不设定颜色，浏览器会取默认色，但各浏览器默认取色不一致，特别是在webkit内核下的safari和chrome浏览器下表现为透明色，在Firefox/Opera下表现为黑色（已验证），建议不要省略此参数。

 

 

3、与其他属性一起使用

零值的border-radius将会以相同的作用影响阴影的外形，但border-image不会影响对象阴影的任何外形；对象阴影同box模型的层次一样，外阴影会在对象背景之下，内阴影会在边框之下背景之上。我们知道，默认情形背景图片是在背景颜色之上的。所以整个层级是：边框>内阴影>背景图片>背景颜色>外阴影。

 

 

4、设置多个边不一样的阴影

.box-shadow{  

        box-shadow:-10px 0 10px red, /*左边阴影*/  

        10px 0 10px yellow, /*右边阴影*/  

        0 -10px 10px blue, /*顶部阴影*/  

        0 10px 10px green; /*底边阴影*/  

    }

当给同一个元素使用多个阴影属性时，需要注意它的顺序，最先写的阴影将显示在最顶层.

 

5、在ie下使用

1）使用ie的shadow滤镜

但这个滤镜一定要配合background属性一起使用

   .box-shadow{  

         filter: progid:DXImageTransform.Microsoft.Shadow(color='#969696',Direction=135, Strength=5);/*for ie6,7,8*/  

         background-color: #ccc;  

       -moz-box-shadow:2px 2px 5px #969696;/*firefox*/  

         -webkit-box-shadow:2px 2px 5px #969696;/*webkit*/  

         box-shadow:2px 2px 5px #969696;/*opera或ie9*/  

     }

2）使用jquery

$('.obj').boxShadow(-10,-10,5,"#0cc"); //obj元素使用了box-shadow  

转自https://www.cnblogs.com/miaoxiaojiao/p/7077704.html