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) 漂亮, 实用 -- 我非常喜欢, 你呢?
来源: http://www.webhek.com/post/css-box-shadow.html