html5 头部阴影,兼容各种主流浏览器的CSS阴影效果

CSS阴影效果(Box shadows)应用在Web页面设计上已经有了一段时间了。之前在CSS2阶段阴影效果还不是很有效之时，大部分的这种效果都是使用Photoshop图片实现的，但对于一些缺乏这些绘图技巧的人来说，比如我，学习Photoshop是件讨厌的事情。但随着浏览器技术的进步，不会使用Photoshop绘图技术也不能阻挡我们使用阴影效果了。就在不仅之前，我找出一段代码，它能在兼容各种主流浏览器的情况下用CSS3实现阴影效果(Box shadows)。下面就是解决方案。

观看演示

CSS代码

也许你会产生怀疑，像IE这种老古董浏览器，如何让它也支持CSS阴影效果呢。是的，也能实现，只是它的语法和其它现代浏览器的语法很是不同。

div.shadow {

-moz-box-shadow: 3px 3px 4px #444;

-webkit-box-shadow: 3px 3px 4px #444;

box-shadow: 3px 3px 4px #444;

-ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#444444')";

filter: progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#444444');

}

这段CSS代码中，我给-box-shadow的属性设置了4种值：x轴偏移 y轴偏移, 模糊程度(blur-radius), 扩散程度(spread-radius), 以及 颜色。如果我们将inset关键字放在这四个参数之前，阴影效果会出现在元素内部，也就是阴影效果向内扩展。 针对IE的语法代码是有点丑陋和繁琐，但它也是有效的。

观看演示

像CSS圆角效果，CSS渐进色效果，CSS动画效果等现代浏览器CSS3新技术，给我们Web程序开发者带来了更广阔的程序艺术创作空间。CSS阴影效果(box shadows)漂亮、实用——我非常喜欢，你呢？