兼容各种主流浏览器的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)漂亮、实用——我非常喜欢,你呢?

阅读余下内容
 

发表评论

电子邮件地址不会被公开。 必填项已用*标注


京ICP备12002735号