首页 HTML/CSS 感受CSS3属性:box-...

感受CSS3属性:box-shadow

作者:

修改日期:

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.     border1px dashed #333333;   
  3.     box-shadow: 0 0 30px #409CF2;   
  4. }