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 的语法代码是有点丑陋和繁琐,但它也是有效的.
像,,等现代浏览器 CSS3 新技术,给我们 Web 程序开发者带来了更广阔的程序艺术创作空间.CSS 阴影效果 (box shadows) 漂亮,实用--我非常喜欢,你呢?
来源: http://www.webhek.com/css-box-shadow