一行CSS3代码为文字和块状元素添加阴影

       阴影是web设计师为页面增加层次感的常用手法。尽管在css3诞生之前，微软推出了投影滤镜，但IE以外的其它浏览器都不愿意与微软为伍，打死不支持投影，所以设计师仍然需要用在photoshop中把带阴影效果的图片制作好然后给网页使用。

　　这就意味着图片必须使用支持透明通道的png格式，导致图像文件变大不少，所以对于直线形状的阴影，有的设计师会切出一小块阴影然后在页面上通过重复填充进行延伸，其过程可不是一般的麻烦。

　　作为w3c成员之一的CSS3，其内置的阴影必然能得到各大浏览器厂商的认可。世界和平统一了，设计师们终于解放了，他们不用再为网页的阴影效果而烦恼。

　　我们知道，一个元素，哪怕不是块级的（比如p元素），它自身也都有一个矩形的背景。那么问题来了，我是给背景做阴影还是文字呢？CSS3考虑得很周到，它分别为这两个部分定义了box-shadow和text-shadow属性。

　　我们先来构建一段用于测试的html代码

　　运行效果如下图所示，页面显示一个背景为浅灰色的div块

　　现在我们先来测试box-shadow属性。跟前面发的圆角一样，这个属性也要用不同的前缀兼容不同的浏览器，目的吧，不就是厂商想让大家记住它们的名字喽。

　　以其中一行为例

　　4个参数，用英文空格分开，分别代表x方向上的偏移，y方向上的偏移，阴影大小和阴影颜色。

　　所以这段代码实现了一个x方向上偏移5像素，y方向上偏移10像素，大小为25像素的灰色阴影。

　　效果如下图所示

　　现在我们来测试text-shadow，写法跟box-shadow基本一致。

　　再次运行，文本下方显示出一个红色的阴影。

       效果如下图所示

　　国家打仗，遭殃的是老百姓；浏览器厂商不和，受苦的是Web设计师。只有和平共处才是促进社会进步的最大动力。希望在以后的日子里，各大浏览器厂商能够不计前嫌，共同遵守Web标准，让Web制作变得简单，让网页产量大幅提升，为天下网民共同开创高效、快速的网络新时代。