css阴影

简介

text-shadow是给文本添加阴影效果，box-shadow是给元素块添加周边阴影效果。随着html5和CSS3的普及，这一特殊效果使用越来越普遍。

语法

{
    box-shadow:[inset] x-offset y-offset blur-radius spread-radiuscolor
}
/* 对象选择器 {box-shadow:[投影方式] X轴偏移量 Y轴偏移量阴影模糊半径 阴影扩展半径 阴影颜色}
    正常情况下：阴影出现在盒子外部的右下方，如果加了 inset 阴影出现在盒子内部左上方
 */

注意：
为了兼容为了兼容各主流浏览器并支持这些主流浏览器的较低版本，在基于Webkit的Chrome和Safari等浏览器上使用box-shadow属性时，我们需要将属性的名称写成-webkit-box-shadow的形式。Firefox浏览器则需要写成-moz-box-shadow的形式

取值情况

1. 四周出现阴影：x y 轴上的偏移量为0

    box-shadow: 0px 0px 10px 10px red;

2. 如果不知道阴影颜色：阴影在webkit内核下的safari和chrome浏览器下表现为透明色，在Firefox/Opera下表现为黑色。

    box-shadow: 0px 0px 10px 10px;

3. 四边阴影的情况

    box-shadow:-10px 0 10px red, /*左边阴影*/
    10px 0 10px yellow, /*右边阴影*/
    0 -10px 10px blue, /*顶部阴影*/
    0 10px 10px green; /*底边阴影*/

4. 多层阴影的情况

    box-shadow:0 0 10px 20px red,
         0 0 10px 5px black;
}

如果前面的阴影模糊值小于后面的阴影模糊值，那么前面的显示在后面之上，如果前面阴影的模糊值大于后面的阴影模糊值，那么前面的阴影将遮住后面的阴影效果。

低版本IE阴影处理-filter(简单)

filter: none | blur() | brightness() | contrast() | drop-shadow() | grayscale() | hue-rotate() | invert() | opacity() | saturate() | sepia() | url();

.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*/
}

阴影进阶

1. 曲线阴影(外阴影+内阴影) 有一种很凸的视觉

    box-shadow: 0 1px 4px rgba(0,0,0,0.3), 0 0px 40px rgba(0,0,0,0.1) inset;
}

2. 桥边阴影 有一种很凹的视觉

.box3 {
            display: inline-block;
            *display: inline;
            width: 200px;
            height: 248px;
            margin: 20px;
            background-color: #fff;
            border: 1px solid #eee;
            -webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.27), 0 0 60px rgba(0, 0, 0, 0.06) inset;
            -moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.27), 0 0 40px rgba(0, 0, 0, 0.06) inset;
            box-shadow: 0 1px 4px rgba(0, 0, 0, 0.27), 0 0 40px rgba(0, 0, 0, 0.06) inset;
            position: relative;
            *zoom: 1;
        }

        .box3:before {
            -webkit-transform: skew(-15deg) rotate(-6deg);
            -moz-transform: skew(-15deg) rotate(-6deg);
            transform: skew(-15deg) rotate(-6deg);
            left: 15px;
        }

        .box3:after {
            -webkit-transform: skew(15deg) rotate(6deg);
            -moz-transform: skew(15deg) rotate(6deg);
            transform: skew(15deg) rotate(6deg);
            right: 15px;
        }

        .box3:before,
        .box:after {
            width: 70%;
            height: 55%;
            content: ' ';
            -webkit-box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
            -moz-box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
            box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
            position: absolute;
            bottom: 10px;
            z-index: -1;
        }