W3C将box-shadow加入CSS3属性列表，并使其标准化，应该是件值得高兴的事。也许，从此你再也不会因为“实现代价”而与设计师争得脸红。
那么，box-shadow究竟是如何被人们所称道的？
如果你是前端工程师，你可能有过这些痛苦的经历：
- 面对到处都是圆角的设计稿；
- 面对到处都是圆角+阴影的设计稿；
- 面对到处都是圆角+阴影+半透明的设计稿。
如果你还没有接触过CSS3，或者你所负责的这个项目，必须兼容IE系列。那么，无论是面对上面的哪一点，都可以耗费你不少的精力和时间。
这里，我们搁下IE不谈，只谈谈box-shadow。
box-shadow属性至多有6个参数可以设置：
- 阴影水平偏移量：如果该参数为正值，则阴影在box的右边；如果该参数为负，则阴影在box的左边
- 阴影垂直偏移量：如果该参数为正值，则阴影在box的底部；反之，则在box顶部
- 阴影模糊距离（大小）：此参数可选，只能是正值。如果该参数值为0，则阴影的边缘犀利；该值越大，阴影的边缘越模糊
- 阴影扩展距离：此参数可选。如果该参数为正，则整个阴影都延展扩大；反之，则缩小。
- 阴影颜色：此参数可选。如果不写，则会选取默认颜色。至于默认颜色会是什么，不清楚（在webkit核心下为无色，即透明），建议不要省略该值。
- 阴影类型：此参数可选。有唯一值‘inset’，如果存在该值，那么阴影将为内阴影；如果不写该值，则为缺省的外阴影。
box-shadow的特征：
- 通过对阴影偏移量的设置，可以使得阴影出现在“上、右、下、左”任一方向；
- 阴影大小、边缘模糊、颜色可自定义；
- 可设置内阴影及外阴影；
- 可设置“多组”阴影。
box-shadow实例：
来实现一个最基本的阴影的效果，如下图：
Figure 1: 基本阴影效果
就是这样的一个具有最简单阴影的效果，如果不用box-shadow做，那么要实现的话，也必要再多堆叠一层无实质意义的标签。
再来看看box-shadow的代码实现：
box-shadow:5px 5px #888;background:#eee;该实例的DEMO展示：simple box-shadow。同时，可以通过对偏移量数值的更改以查看其它的效果，实现特征1所述效果。
如果，你想要得到一个内阴影的效果，只需在上诉代码中加上一个'inset'即可：
box-shadow:5px 5px #888 inset;background:#eee;经此一改，效果立即变成：
Figure 2: 内阴影效果
至于阴影出现的方向，仍然可以通过对偏移量的更改来控制，看看DEMO：内阴影
通过box-shadow，阴影的实现是如此的方便；而圆角也一如本文开头所说，用border-radius也可轻松搞定。如果你对CSS3中圆角的实现不大了解，请看： CSS3 border-radius圆角的优雅实现。
如此一来，开篇所述的3大痛苦经历，前2大已经变得那么微不足道了。如果把半透明阴影也搞定了，那3大痛苦经历似乎也不再那么纠结了。
那么半透明阴影有解么？是的，有，而且异常简单。
你或许已经听说过RGBA colors与HSLA colors，没听说过也无妨，CSS3为了让半透明的实现更简单，新增了RGBA和HSLA这样的颜色属性。相比于RGB，RGBA多了一个‘A’，而 这个A正是alpha（透明度）的缩写。这样的组合要告诉我们的是，CSS3允许你使用一个可以调节透明度的颜色。
我们看看半透明阴影与普通阴影的对比DEMO：半透明阴影。
一个小应用：
曾惊艳于Chrome与Safari的文本框聚焦效果，却也不甚欢喜其实现的繁杂。
Figure 3: Safari下常态文本框
Figure 4: Safari下获取焦点的文本框
如今，对着如Figure 4的效果，你可以微笑着说：“这个，简单！”
不信，我们可以一起去看看DEMO：文本框聚焦效果。