codetc - 网站开发技术 首页 前端 查看内容

CSS3教程之阴影效果

2014-12-25 00:36| 发布者: CODETC| 查看: 1763| 评论: 0

在以前,阴影效果曾让 Web 设计师既爱又恨,要实现阴影的效果就必须做图、切图和繁锁的页面布局,不但开发起来麻烦,同时也会引入更多的代码,使页面变得雍肿;而现在我们有了 CSS3,做阴影效果不再需要 Photoshop,随着浏览器的普遍支持,越来越多的网站都在使用这个功能。


块阴影由以下三句CSS代码便可实现:

-webkit-box-shadow: 10px 10px 25px #ccc;
-moz-box-shadow: 10px 10px 25px #ccc;
box-shadow: 10px 10px 25px #ccc;



前两个属性设置阴影的 X / Y 位移,这里分别是 10px,第3个属性定义阴影的虚化程度,最后一个设置阴影的颜色。


而文字阴影只需要设置text-shadow即可:

text-shadow: 2px 2px 5px #ccc;



目前支持阴影效果的浏览器:Firefox 3.1+, Safari, Chrome, Opera, IE 10+
合理使用阴影效果将可以给页面带来更友好,更美观的效果

文章来源 CODETC,欢迎分享,转载请注明地址: http://www.codetc.com/article-103-1.html

最新评论

 作为游客发表评论,请输入您的昵称

返回顶部