CSS3 box-shadow介绍

我对任何美的东西都会本能地生出一种爱，在CSS的世界里，凡和色彩渐变等沾边的属性都是我的菜。因此box-shadow这个属性怎能放过。本篇就详细介绍一下box-shadow盒子阴影。

按例先看一下基本参数：

none：是默认值，表示没阴影。设为none后下面参数都将变得无意义。

inset：内阴影。该参数可选，不设的话默认是外阴影。

x-offset / y-offset：必须的参数。水平和垂直阴影的偏移量。正值表示往x轴y轴正方向偏移（即往右往下）。负值反过来往x轴y轴反方向偏移（即往左往上）。

blur-radius：阴影模糊半径。该参数可选，值为0表示不模糊，值越大，阴影的边缘就越模糊。值不能为负数。

spread-radius：阴影扩展半径。该参数可选，正值表示阴影扩展，负值表示阴影缩小。

color：阴影颜色。该参数可选，不设就取浏览器的默认色。因为各浏览器的默认色不同，推荐还是设一下，设一下又不会怀孕...

完整的语法box-shadow: [inset x-offset y-offset blur-radius spread-radius color]+ 熟悉正则表达式的能看懂后面+号表示可以设多个阴影。

理论是枯燥的，实际来试试。先来个最简单的，只设必选参数x-offset / y-offset和非必须但推荐设一下的color：

.box-shadow {
    width: 150px;
    height: 50px;
    border-radius: 10px;
    border: 1px solid #b9b9b9;
    box-shadow: 5px 10px red;
}
<div class="box-shadow"></div>

效果一目了然。当x-offset / y-offset是正值时，阴影向x轴y轴正方向偏移。即相右偏移5px，向下偏移10px。同理x-offset / y-offset为负值时，阴影向x轴y轴负方向偏移。例如box-shadow: -5px -10px red;

x-offset / y-offset一正一负呢？看看就知道了。左图box-shadow: -5px 10px red;右图box-shadow: 5px -10px red;
上面都是两边阴影，要单边阴影呢？将x-offset / y-offset其中一个设为0即可，请自行脑补一下图片。

加上blur-radius模糊半径试试：左图box-shadow: 5px 10px 10px red;中图box-shadow: 5px 10px 20px red;右图box-shadow: 5px 10px 50px red;

很明显看出增加了blur-radius模糊半径后，原本的实体阴影其实往外扩展了，尤其是右图模糊半径设成50px后扩展的更为明显，边框的4条边都有了阴影效果。你可以试试模糊半径改成100px，500px，你会感觉生无可恋…

那为何阴影会外扩呢？那就必须解释一下浏览器实现阴影的原理，当浏览器读取到上面box-shadow: 5px 10px 10px red;这行CSS代码后，会分如下4步来实现阴影效果：

上图从左至右依次是浏览器的4步动作。首先根据指定的color克隆一个和原始元素同样尺寸的元素。然后根据指定的x-offset / y-offset将克隆出来的元素进行偏移。

第三步根据指定的blur-radius模糊半径10px，依据高斯算法进行模糊处理。本质上是在阴影边缘将阴影色和纯透明色之间的颜色过渡，长度近似于blur-radius模糊半径的两倍，即20px左右。这就是导致阴影外扩的原因。

最后，浏览器在克隆元素上，将交集部分剪切掉，剩余部分拼接到原始元素边上，就实现了最终的效果。注意这和我们看上去的有的不同，看上去像是两个元素叠加在了一次，导致下层的克隆元素部分被遮盖了。其实不是的。这意味着即使你将原始元素的背景色设成半透明，也不会看到底层的克隆元素，因为原始元素的下面根本没有任何东西。

如果你想限制模糊半径的范围，如单边模糊时，你就需要加上spread-radius阴影扩展半径。左图box-shadow: 0 10px 20px red;。虽然只设了y轴偏移，但由于阴影外扩导致3边都出现了阴影。右图box-shadow: 0 10px 20px -10px red;。通过spread-radius负值让阴影缩小，-10px会把阴影的左右宽度和上下高度均缩小10px，即宽度和高度均缩小20px。

当spread-radius的负值和blur-radius的值相等时，阴影会消失。

如果blur-radius为0（表示不模糊阴影），只有spread-radius时，效果相当于border。例如下图box-shadow: 0 0 0 5px red;。当然这并不是真正的border，盒子模型计算时宽高不会被计算在内，因此文字hello和阴影重叠了，如果是真的border是不会重叠的。

阴影默认都是外阴影，你可以设inset将阴影指定为内阴影。例如左图box-shadow: inset 0 0 20px red;右图box-shadow: inset 0 0 20px 10px red;

但当给图片加上内阴影会发现毫无作用，例如左图：

/* 左图 */
.div1 {
    display: inline-block; 
    box-shadow: inset 0 0 10px 5px blue;
}
<div class="div1">
    <imgsrc="head.png" />
</div>

左图div容器虽然已经设了内阴影，但完全没有效果。其实内阴影已经有了，只不过被图片给遮住了而已。要实现右图效果，你可以：

方案一：将子元素img层级降低，所以先将其设成relative再设z-index为-1

.div1 {
    display: inline-block; 
    box-shadow: inset 0 0 10px 5px blue;
}
.img1 {
    position: relative;
    z-index: -1;
}
<div class="div1">
    ![](head.png)
</div>

方案二：将子元素img改成父元素div的background-img，所以先给div定宽高，再设background-image。关于background属性你可以点击这里

.div1 {
    width:150px;
    height: 150px;
    display: inline-block; 
    box-shadow: inset 0 0 10px 5px blue;
    background-image: url("head.png");
}
<div class="div1"></div>    //里面不再需要img子元素啦

方案一利用了CSS的层级关系，你可以理解为大层级关系

方案二其实是利用了box-shadow的层级关系，你可以理解为小层级关系。box-shadow的层级关系看W3C的原图：

width: 100px; height: 100px;
border: 12px solid blue; background-color: orange;
border-top-left-radius: 60px 90px;
border-bottom-right-radius: 60px 90px;
box-shadow: 64px 64px 12px 40px rgba(0,0,0,0.4),
            12px 12px 0px 8px rgba(0,0,0,0.4) inset;

图中看出box-shadow的层级关系从高到低依次是border > 内阴影 > background-image > background-color > 外阴影。方案二就是利用了内阴影 > background-image这一特性。

像background一样，你还可以指定多层阴影，用逗号隔开。实现方式就是两个0偏移量和0模糊值加上正值的扩张半径。这也是实现多重边框的常见手段。彩虹走一个~

.box-shadow {
    width: 150px;
    height: 50px;
    border:2px solid red;
    box-shadow: 0 0 0 2px orange,
                0 0 0 4px yellow,
                0 0 0 6px green,
                0 0 0 8px #66CCCC,
                0 0 0 10px blue,
                0 0 0 12px #996699;
}
<div class="box-shadow"></div>

多层阴影的一个很常见的例子就是实现两侧阴影：

box-shadow: 6px 0 5px -5px red,
            -6px 0 5px -5px red;

上面介绍的不论是单边还是多边阴影，不论是单层还是多层阴影，都是均匀的阴影。下面来介绍一下单边不均匀的阴影是如何实现的。

其实单边不均匀的阴影不是仅靠box-shadow属性就能实现的，还需要配合图层覆盖和部分动画（如旋转）。如下图，下边的阴影是不均匀的，左下和右下的阴影明显比中间更突出：

分几步来讲解如何实现的：

step0是普通的div，没什么好多讲的，源代码如下：

body {
    background: #eee;
}
.box {
    width:200px;
    height:100px;
    background:#FFF;
    margin:10px;
    line-height:100px; 
    text-align:center;
    position: relative;  /*为下面absolute定位做准备*/
}
<div class="box">step 0</div>

从step1开始实现不均匀的阴影效果。先给div加上::before和::after两个伪元素，内容为空，我们只要伪元素的躯壳，并不真想让伪元素显示出来。（伪元素里的红色border纯粹是为了看起来更清晰，最后会删掉的。）

.effect::before, .effect::after {
    content: "";
    border:1px solid red;
    width: 50%;
}
<div class="box effect">step 1</div>

再看step2，为两个伪元素增加absolute定位。通过left和top为absolute元素定位，通过bottom拉伸absolute元素。（关于absolute定位可以参照这里）

.effect::before, .effect::after {
    content: "";
    border:1px solid red;
    width: 50%;
    position: absolute;
    left: 10px;
    top: 80%;
    bottom: 15px;
}

step2中定位后::before和::after两个伪元素完全重合在了一起，因此在step3中为::after指定right位置将它俩分开：

.effect::after {
    right: 10px;
    left: auto;
}

step3中两个伪元素一左一右分开后，在step4中让它俩稍微旋转一点角度，并加上本篇介绍的阴影：

.effect::before, .effect::after {
    content: "";
    border:1px solid red;
    width: 50%;
    position: absolute;
    left: 10px;
    top: 80%;
    bottom: 15px;
    transform: rotate(-5deg);    /*旋转*/
    box-shadow: 0 15px 10px #777; /*阴影*/
}
.effect::after {
    transform: rotate(5deg);   /*旋转*/
    right: 10px;
    left: auto;
}

到step4其实已经能明白不均匀阴影的实现原理了，最后一步设置z-index:-1;将伪元素隐藏掉（为演示效果而加的红色边框直接删掉）。最终代码：

.effect::before, .effect::after {
    content: "";
    width: 50%;
    position: absolute;
    left: 10px;
    top: 80%;
    bottom: 15px;
    transform: rotate(-5deg);
    box-shadow: 0 15px 10px #777;
    z-index: -1;
}
.effect::after {
    transform: rotate(5deg);
    right: 10px;
    left: auto;
}

总结

box-shadow属性本身参数不算多（相对其他属性），但要用好不容易。我承认凭脑子想就能写出效果并不容易，所以网上有一堆可视化页面可自动生成box-shadow效果，例如可以到css3gen上去试试。但能明白每个参数的意义，改动起来会容易点。权威请参考W3C和MDN。