CSS3 boxshadow阴影之美

与圆角border-radius属性一样，盒阴影box-shadow也是一个令人激动的属性。

　　W3C将box-shadow加入CSS3属性列表，并使其标准化，应该是件值得高兴的事。也许，从此你再也不会因为“实现代价”而与设计师争得脸红。

　　那么，box-shadow究竟是如何被人们所称道的？

　　如果你是前端工程师，你可能有过这些痛苦的经历：

1. 面对到处都是圆角的设计稿；
2. 面对到处都是圆角+阴影的设计稿；
3. 面对到处都是圆角+阴影+半透明的设计稿。

　　如果你还没有接触过CSS3，或者你所负责的这个项目，必须兼容IE系列。那么，无论是面对上面的哪一点，都可以耗费你不少的精力和时间。

　　这里，我们搁下IE不谈，只谈谈box-shadow。

　　box-shadow属性至多有6个参数可以设置：

1. 阴影水平偏移量：如果该参数为正值，则阴影在box的右边；如果该参数为负，则阴影在box的左边
2. 阴影垂直偏移量：如果该参数为正值，则阴影在box的底部；反之，则在box顶部
3. 阴影模糊距离（大小）：此参数可选，只能是正值。如果该参数值为0，则阴影的边缘犀利；该值越大，阴影的边缘越模糊
4. 阴影扩展距离：此参数可选。如果该参数为正，则整个阴影都延展扩大；反之，则缩小。
5. 阴影颜色：此参数可选。如果不写，则会选取默认颜色。至于默认颜色会是什么，不清楚（在webkit核心下为无色，即透明），建议不要省略该值。
6. 阴影类型：此参数可选。有唯一值‘inset’，如果存在该值，那么阴影将为内阴影；如果不写该值，则为缺省的外阴影。

　　box-shadow的特征：

1. 通过对阴影偏移量的设置，可以使得阴影出现在“上、右、下、左”任一方向；
2. 阴影大小、边缘模糊、颜色可自定义；
3. 可设置内阴影及外阴影；
4. 可设置“多组”阴影。

　　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：文本框聚焦效果。