0
(0)

HTML5和CSS3出来很久了，一直担心IE浏览器的兼容性，所以并没有深入研究，自从电脑安装了w8以后，IE也升级到了IE10，发现IE10和FF火狐浏览器都可以很好的支持HTML和CSS3的属性了。比如最近在修改小川博客的顶部导航的时候就用到了CSS3中的一个属性box-shadow，相当好玩。

box-shadow是CSS3中的一个特效属性，可以在不为模块添加边框的情况下显示阴影效果，先让我们了解下box-shadow属性取值。
box-shadow支持四个参数，分别是x-offset（x轴偏移）、y-offset（y轴偏移）、blur（模糊值）、color of shadow（阴影颜色），下面给大家演示一个应用效果案例：
先打开小川博客中其他文件：http://www.xuejianzhan.com/1847.html
当你把鼠标移动到文章中“blockquote”模块上的时候，就会发现在边框外围多出了一个阴影效果，如图：

box-shadow效果演示
呵呵，是不是很绚丽，另外你也可以在小川博客的导航中看到这样的效果，实现方法超级简单，你只需要在需要显示的div模块样式中添加如下的样式属性就可以了：

  1. box-shadow: 0 0 30px #409CF2;  

以下是小川博客文章“blockquote”模块中实现的样式代码：

  1. blockquote:hover {   
  2.     border: 1px dashed #333333;   
  3.     box-shadow: 0 0 30px #409CF2;   
  4. }  
声明：本站分享的WordPress主题/插件均遵循 GPLv2 许可协议（免费开源），相关介绍资料仅供学习参考，实际版本可能会因版本迭代或开发者调整而产生变化，如程序中涉及有第三方原创图像、设计模板、远程服务等内容，应获得作者授权后方可使用。本站不提供该程序/软件的产品授权与技术服务，亦不收取相关费用。