box-shadow

ゝ一纸荒年。 2022-04-10 14:38 183阅读 0赞

一、什么是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][https_www.cnblogs.com_miaoxiaojiao_p_7077704.html]

[https_www.cnblogs.com_miaoxiaojiao_p_7077704.html]: https://www.cnblogs.com/miaoxiaojiao/p/7077704.html