1.早先在CSS3中编写，您可以使用box-shadow属性创建阴影效果以增加二维平面的深度。这个属性在前端开发中用的比较多。比如segmentfault的首页就使用了box-shadow属性来增加深度效果。今天我们就一起来看看这个属性。2、box-shadowbox-shadow的基本语法：[x-offsety-offsetblur-radiusspread-radiuscolor,inset]+其中，+表示在正则表达式中出现一次或多次，也就是说，box-shadow可以支持同时设置多个阴影。首先我们看一下基本参数的含义：none：默认值，设置后表示无阴影效果；inset：在这个值之后表示内阴影，不设置则默认表示外阴影；x-offset/y-offset：分别表示阴影在水平方向和垂直方向的偏移量。支持正负值设置。正值表示向右下偏移，负值表示向左上偏移；blur-radius：阴影的模糊距离，只能设置0或正值。值越大，阴影边缘越模糊；spread-radius：阴影的扩散半径（可省略，默认为0）。支持正负值。正值表示阴影扩大，负A值表示阴影收缩。这个属性在box-shadow中比较难理解。该属性的含义将在文章后面详细介绍；颜色：阴影的颜色。如果未设置，将使用浏览器的默认颜色。讲解完box-shadow的各个参数，你可能还是不知道怎么用。那么先来看看人们经常使用box-shadow的一个方法：指定三个长度值和一个颜色值来实现阴影效果，如下：box-shadow:2px3px4pxrgba(0,0,0,.5);在浏览器中的效果如下：最后我们实现了左边框阴影和底边框阴影的效果，但是大家有没有想过box-shadow绘制阴影的原理呢？绘图原理见下一节。3.box-shadow绘制阴影的原理下图形象地说明了阴影是如何绘制的。以下面的代码为例：.box{width:200px;高度：200px；背景色：#fb3；box-shadow:2px3px4pxrgba(0,0,0,.5);}那么绘制阴影的步骤将按以下步骤进行：(1)与元素相同的大小和位置，绘制anrgb(0,0,0,.5)，如下图1所示；(2)将图1中的矩形向右移动2px，向下移动3px，如下图2；(3)使用高斯模糊算法（或类似的算法）将其模糊成4px，本质上是阴影颜色与阴影边缘的纯透明色之间的颜色过渡长度约为模糊半径的两倍，为如下图3所示；(4)模糊后的矩形和原来元素的交集部分会被切掉，所以我们看到的最终阴影效果如下图4所示，也就是我们看到的最终阴影效果。准确地说，我们会看到顶部有一个1px的阴影（4px-3px），左边有2px（4px-2px），右边有6px（4px+2px），底部有7px（4px+3px）。实际上，阴影看起来会比这些值略小，因为阴影颜色在边缘的过渡不是线性的。说完box-shadow的绘制原理，下面将结合实例对box-shadow的各个属性进行详细说明4.box-shadow属性详解4.1x-offsetx-offset用于声明其偏移量水平方向的影子。如果为正，则阴影在元素的右侧；如果为负，则阴影位于元素的左侧。如下代码所示：box-shadow:10px05px0rgba(0,0,0,.5);box-shadow:-10px05px0rgba(0,0,0,.5);在浏览器中效果如下：第一张图片，设置x-offset为10px，右侧产生阴影；在第二张图片中，将x-offset设置为-10px会在左侧产生阴影。4.2y-offsety-offset用于声明阴影在垂直方向的偏移量。如果为正，则阴影在元素的一侧；如果为负，则阴影位于元素的顶部。如下代码所示：box-shadow:010px5px0rgba(0,0,0,.5);框阴影：0-10px5px0rgba(0,0,0,.5);在浏览器中效果如下：第一张图片，设置y-offset为10px，底部产生阴影；在第二张图片中，将y-offset设置为-10px，顶部会产生阴影。4.3blur-radiusblur-radius表示阴影的模糊半径。值越大，阴影越模糊。此属性不支持负值。如下代码所示：box-shadow:0000rgba(0,0,0,.5);box-shadow:0020px0rgba(0,0,0,.5);box-shadow:0050px0rgba(0,0,0,.5);第一张图，设置x-offset，y-offset，blur-radius为0px，即无位移，无模糊，无阴影效果；第二张图blur-radius设置为20px，第三张图socialgroupblur-radius设置为50px。可以看出blur-radius值越大，阴影越模糊。4.4spread-radius这个属性是box-sizing中最难理解的。我们先看下面这个例子：box-shadow:0px0px0px20pxdeeppink;可以看到20px的边框效果：然后我们动态改变blur-radius，可以看到模糊的部分就是边框部分，也就是颜色为deeppink的边框。其实我们可以把spread-radius理解为元素blur的“margin”。为正时，梯度向外扩展，为负时，梯度向内收缩。4.5colorcolor表示阴影的颜色，支持css中任意颜色。如下代码所示：.box1{box-shadow:0050px0darkgreen;}.box2{box-shadow:0050px0deeppink;}.box3{box-shadow:0050px0blue;}三图片中，阴影的颜色设置不同，会产生相应的阴影效果。4.6insetshadow默认为外阴影，可以使用inset关键字指定阴影为外阴影。如下代码所示：.box1{box-shadow:0050px0darkgreeninset;}.box2{box-shadow:0050px0deeppinkinset;}.box3{box-shadow:0050px0blueinset;}在浏览器中的效果如下：三张图片中，阴影设置为内阴影，最终阴影在元素内部生成。5、box-shadow属性大小写5.1单边投影代码如下：box-shadow:05px4px-4pxblue;5.2双面投影当我们只想在元素的两侧设置阴影时，似乎比较麻烦。由于dilationradius在四个方向上的作用是一样的（也就是说，我们不能指定投影在水平方向上放大，在垂直方向上缩小），所以唯一的方法就是使用两个投影（每边一个）来达到目的。基本上，单侧投影中的技术应用了两次，如下：box-shadow:5px05px-5pxblue,-5px05px-5pxblue;在浏览器中效果如下：5.3模拟边框使用box-shadow属性可以模拟边框的效果，如下图：
