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”模块上的时候,就会发现在边框外围多出了一个阴影效果,如图:
呵呵,是不是很绚丽,另外你也可以在小川博客的导航中看到这样的效果,实现方法超级简单,你只需要在需要显示的div模块样式中添加如下的样式属性就可以了:
- box-shadow: 0 0 30px #409CF2;
以下是小川博客文章“blockquote”模块中实现的样式代码:
- blockquote:hover {
- border: 1px dashed #333333;
- box-shadow: 0 0 30px #409CF2;
- }
声明:本站分享的WordPress主题/插件均遵循 GPLv2 许可协议(免费开源),相关介绍资料仅供学习参考,实际版本可能会因版本迭代或开发者调整而产生变化,如程序中涉及有第三方原创图像、设计模板、远程服务等内容,应获得作者授权后方可使用。本站不提供该程序/软件的产品授权与技术服务,亦不收取相关费用。
评论(0)