在设计稿中，有很多元素都存在阴影，在没有css3的时候，我们处理阴影都是用图片的形式来处理，或者是用js的方式来控制，相对于js脚本，png 格式的图片处理阴影是最好的方式，拿过来就可以直接使用，特别是对于一些细节上的地方，图片的效果是最理想的。反之使用图片处理阴影也存在着一些问题，1，图片的大小，2，修改的难易程度，为此css3新版中增加了阴影的样式：box-shadow

我们常用的书写方式：box-shadow: 0 16px 48px 0 #e2e4ee;

css3 阴影的具体设置：.box-shadow{ //Firefox4.0- -moz-box-shadow:投影方式 X轴偏移量 Y轴偏移量阴影模糊半径 阴影扩展半径 阴影颜色; //Safariand Google chrome10.0- -webkit-box-shadow:投影方式 X轴偏移量 Y轴偏移量阴影模糊半径 阴影扩展半径 阴影颜色; //Firefox4.0+、 Google chrome 10.0+ 、 Oprea10.5+ and IE9 box-shadow: 投影方式 X轴偏移量 Y轴偏移量 阴影模糊半径 阴影扩展半径 阴影颜色; }

阴影设置还有一个特别之处在于颜色可以设置透明度，常写页面的的朋友会注意道，阴影写的方式，主要是两种：

box-shadow: 0 16px 48px 0 #e2e4ee;

box-shadow: 0px 10px 20px rgba(2,48,76,0.05);

最大的区别就是颜色设置上的区别；一个是颜色 HEX的方式，一个是颜色 RGB的方式；在RGB的颜色后面我们还可以添加一个透明度，这个对于颜色来说是特别方便的。