<!– 前端技术学习笔记 –>

因为是第一篇，也就从这个Wordpress Theme说起，本模板借鉴自einfach-modernes-webdesign.de，而让人眼前一亮的是这个站在Logo的处理上，组合使用了文字阴影和块阴影这两种比较新的属性，所以顺便对CSS的阴影属性做了一些学习。在Firefox 3.5出现之后，有两个和阴影相关的CSS属性走上了舞台。

1.之前主流的阴影处理

在文字阴影和块阴影出现之前，对于页面设计上的阴影处理，通常需要借助到背景图片的帮助，但是这样增加了图片的请求数。必要时需要用CSS Sprites技术整合背景图像，不但增添了一些人工，同时也有一些情况是不适用的，CSS Sprites使用的是坐标定位，也就说明在需要使用right、bottom等来定位背景图像的时候无法使用CSS Sprites的拼接技术(如本站导航)。

同时在阴影的处理上，为了实现更好的效果，可能需要使用高质量的png图像，又将面对令人生厌的IE Bug，需要使用!important hack并另外制作替代的gif图像，很伤脑筋。

而CSS 阴影效果的实现提供了另一种思路，但不幸的是，你仍然需要面对浏览器的兼容性问题，特别是主流的IE系列。

2.text-shadow

text-shadow顾名思义就是给文字加阴影，如本站的h1，就是加了text-shadow。

1
2
3

h1 {
text-shadow:0 1px 5px #75C27B;
}

语法：

text-shadow:x轴 y轴 (模糊半径) 颜色；

模糊半径是可选属性，如果使用，则阴影会呈现模糊的渐变；如果省略则阴影会是生硬的轮廓。您随时都可以用Firebug修改本站h1的CSS样式来得到更直观的感观。

部分浏览器可实现多层阴影，用“,”分隔，如：

1
2
3

h1 {
text-shadow:1px 1px 5px #75C27B,2px 2px 6px #EFEFEF;
}

浏览器兼容性：

目前text-shadow被Firefox 3.5+，Safari 1.1+/chrome 2.0+和opera 9.5支持，IE不支持。需要注意的是，Safari只有4.0才支持多层阴影。

• IE各个版本都不支持text-shadow；
• Opera 9.5+支持最多6-9层阴影，并使用CSS2渲染顺序(最先定义的阴影在最下面)。而且出于性能的原因，模糊半径被限制到100px；
• Gecko (Firefox)理论上支持无限层text-shadows (不过不建议尝试) 并遵循新的CSS3渲染顺序(最先定义的阴影在最上面)；
• Safari 1.1-3.2只支持单层text-shadow (只显示第一个逗号之前的声明而无视后面的)。Safari 4.0+才支持多层阴影以及新的CSS3渲染顺序；

对于IE系列，如果要实现文字阴影的效果，需要借助filter的帮助，具体请参考Shadow滤镜和Dropshadow滤镜。

3.box-shadow

box-shadow是应用在块状元素上的阴影，在本站的应用也在h1上。h1也是一个块状元素，而box-shadow是作用在border周围的。上文所述text-shadow作用在h1内部的文字周围。

由于box-shadow还在一个实验阶段，所以在Firefox中被标记为-moz-box-shadow，而在Safari中被标记为-webkit-box-shadow，所以目前这个阶段，建议给这三个属性都做一下定义，以获得最好的支持。如：

1
2
3
4
5

h1 {
box-shadow:1px 1px 5px #999999;
-moz-box-shadow:1px 1px 5px #999999;
-webkit-box-shadow:1px 1px 5px #999999;
}

语法：

box-shadow:(inset) x轴 y轴 (模糊半径) (传播半径) 颜色;

想对于text-shadow，box-shadow多了一个传播半径，这个参数影响的是阴影想对于父元素边框的渐进收窄。而inset也是一个可选参数，如果使用了inset参数，则代表内部阴影，不适用则为外部阴影，故一般省略。

同样box-shadow也可以定义多层阴影，可以使用“,”来分隔。需要注意的是多层阴影的作用顺序，因为不同的浏览器可能会有不同的解释顺序。

浏览器兼容性：

作为全新的正在工作进程中的CSS3属性，box-shadow还没有被浏览器制造商广泛接受。

• Firefox 3.5通过-moz-box-shadow特化来支持这个属性，包括多阴影、inset关键字和传播半径。
• Safari/WebKit跟Firefox实现方式类似，通过-webkit-box-shadow特化来支持阴影。多阴影从4.0版本开始支持，但是还不支持inset关键字和传播半径。
• 最后，Opera和微软IE系列还没有实现box-shadow。

对于IE系列的兼容，同样可以尝试其私有的Dropshadow滤镜。

4.总结

text-shadow和box-shadow已经开始展露头角，各家浏览器厂商都将这两个属性纳入了计划，当然，IE是个特殊，或许IE还在坚持其私有的一些滤镜效果，但是在标准的大浪潮下，好像有些格格不入。无论如何，我们都可以期待将来不会再使用hack来处理无法显示的高质量透明效果。

5.参考与延伸阅读

http://www.qianduan.net/css-shadow-xiangjie.html

http://hacks.mozilla.org/2009/06/text-shadow/

http://hacks.mozilla.org/2009/06/moz-box-shadow/

http://www.w3.org/TR/css3-color/#rgba-color