首页 | 站长免费中心 | 新手上路 | 网站运营 | 网页制作 | 图片设计 | 动画设计 | 网页编程 | 网页特效 | 本站专题 | 虚拟主机 | 域名注册 | 网站建设 | 程序下载
       免费空间资源 | 新闻咨询 | 免费域名 | 免费网盘 | 网站推广 | 网站策划 | 建站经验 | 网站优化 | 网页代码 | 源码下载 | 音乐小偷 | 网络赚钱 | 论坛交流
网站建设
网站建设
虚拟主机
虚拟主机
域名注册
域名注册
711网络首页
站长工具
站长工具
网站源码
网站源码
站长论坛
站长论坛

 711网络 网页制作CSS教程

CSS3中很有用的特性:CSS阴影

来源: 互联网    日期:2009-12-2
 

简介:CSS阴影详解.

设计师常常使用一些独特的字体效果和页面效果,阴影是其中一个,它可以让页面中的文字和元素具有立体的效果,从而被突出出来。传统的方法我们可能常常需要将文字切出来,直接使用图片,如果考虑SEO和网站性能,还可能会使用CSS Sprites等技术将图片整合,比如:

1
2
3
4
h2{ background:url(sprites.png) no-repeat 0 0; font-size:0; text-indent:-9999em;...}
h2#title1{background-position:0 -30px;}
h2#title2{background-position:0 -60px;}
....

这是很棘手的事情,拼合图片会花掉你的大量时间,而且为了实现更好视觉效果,你可能还要使用高质量的32位png图片,这又要让你面对该死的IE 6的png透明问题!

事实上,对于文字的阴影效果,我们完全可以用CSS来实现!

可以查看查看demo先。

Text-shadow

text-shadow可以让我们实现完美的文字阴影效果。基本写法:

text-shadow:[颜色 x轴 y轴 模糊半径],[颜色 x轴 y轴 模糊半径]...

或者

text-shadow:[x轴 y轴 模糊半径 颜色],[x轴 y轴 模糊半径 颜色]...

这里的颜色就是阴影的颜色,你可以将颜色写在前面,也可以写在最后。x轴和y轴分别是其阴影的偏移位置,模糊半径可以理解为阴影长度。而且现在大部分浏览器都支持多层阴影,你可以用逗号分开多组设置(当然也可以只是用单个设置)。

示例:

h1{color:#000; background:#333; font:bold 24px/2 "微软雅黑",Arial; 
text-indent:2em;
text-shadow:black 2px 2px 2px; }

效果如下图:

该属性目前被除IE之外的大部分浏览器支持,对于IE,我们可以使用shadow滤镜来实现:

filter: Shadow(Color='black', Direction='135', Strength='2')

你可能已经注意到,使用shadow滤镜只能定义角度 direction,而不能定义xy轴,z轴也被换成了strength。注意,使用该滤镜的时候,不能够设置背景颜色,否则滤镜将无效!另外如果你的数学不是很好,不太懂三角函数的算法,你可以使用IE的另外一个滤镜:dropshadow:

filter: dropshadow(OffX=2, OffY=2, Color='black', Positive='true');

好吧,IE总是会拖我们的后腿的,不过值得一提的是,IE的这两个滤镜是支持多层阴影的!比如,可以这样写:欲了解更多关于IE的这两个滤镜,请查看:ShadowDropshadow

让我们看一个多层阴影的例子:

h1{font:bold 32px/2 Verdana, Geneva, sans-serif; color:#f39;
text-shadow:1px 1px 2px rgba(0,0,0,.8), 0 0 1em rgba(255, 0, 255, 0.5), 0 0 0.2em rgba(0, 0, 255, 0.9);}

效果如图:

这里我们使用到了rgba色彩,它是一种在CSS中同时声明颜色及其透明度的一种方法,且被大多数A级浏览器支持的色彩属性(除了IE),了解更多请访问:《RGBa色彩的浏览器支持》——同时我们推荐对于纯色半透明的情况使用这种简单的写法。

text-shadow的浏览器兼容性

目前text-shadow被Firefox 3.5+,Safari 1.1+/chrome 2.0+和opera 9.5支持,IE不支持。需要注意的是,Safari只有4.0才支持多层阴影。

  • IE各个版本都不支持text-shadow;
  • Opera 9.5+支持最多6-9层阴影,并使用CSS2渲染顺序(最先定义的阴影在最下面)。而且出于性能的原因,模糊半径被限制到100px;
  • Gecko (Firefox)理论上支持无限层text-shadows (不过不建议尝试) 并遵循新的CSS3渲染顺序(最先定义的阴影在最上面);
  • Safari 1.1-3.2只支持单层text-shadow (只显示第一个逗号之前的声明而无视后面的)。Safari 4.0+才支持多层阴影以及新的CSS3渲染顺序;

box-shadow

先来说IE,IE不支持box-shadow属性,但是上面提到的两个滤镜都可以用来实现阴影效果。这也就是说,IE并没有把文字阴影和盒子阴影区分!这就会出现一些问题:元素中的文字会继承元素的阴影设置。但是如果你不定义该元素的background和color,就只会出现文字阴影,如果只定义background属性而不定义border,就只会出现盒子阴影,文字不会出现阴影;而如果只定义了border属性而不定义background,就即会出现盒子阴影,内容文字及图片也会出现阴影。有兴趣的同学可以折腾一下。

好了,现在让我们忘了IE,来看一看box-shadow。事实上,了解了text-shadow之后,box-shadow就很好理解了,目前只有firefox和safari/chrome通过私有属性支持box-shadow属性。而Opera浏览器虽然目前还不支持该属性,但是在其文档中提到下一个版本的引擎Presto 2.3(目前最新版的Opera 10.10的引擎是Presto 2.2.15)中将会支持 box-shadow,那就让我们慢慢等待吧。

box-shadow的语法和text-shadow是一样的。

#boxShadow{
...
-webkit-box-shadow:2px 2px 2px black;
-moz-box-shadow:2px 2px 2px black;
...
}

事实上,box-shadow和border-radius是很好的搭档:

#boxShadow1{-moz-border-radius:10px;
-webkit-border-radius:10px;
border-radius:10px;
border:1px solid ddd;
-webkit-box-shadow:0 0 10px black;
-moz-box-shadow:0 0 10px black;
padding:10px;}

效果如图:

firefox在3.5版本中才开始支持box-shadow,目前对阴影的渲染还不是很完美。

总结

CSS阴影是CSS3中很有用的特性,我们已经可以在Firefox/webkit/Opera中使用text-shadow,很快也可以在这些浏览器中实现box-shadow。唯独IE特立独行,还在坚持它那蹩脚的滤镜,这真是个杯具。



更多的CSS3中很有用的特性:CSS阴影请到论坛查看: http://BBS.TC711.COM



【 双击滚屏 】 【 评论 】 【 收藏 】 【 打印 】 【 关闭 】 来源: 互联网    日期:2009-12-2   

发 表 评 论
查看评论

  您的大名:
  • 尊重网上道德,遵守中华人民共和国的各项有关法律法规
  • 承担一切因您的行为而直接或间接导致的民事或刑事法律责任
  • 本站管理人员有权保留或删除其管辖留言中的任意内容
  • 本站有权在网站内转载或引用您的评论
  • 参与本评论即表明您已经阅读并接受上述条款
认证编码: 刷新验证码
点评内容: 字数0
  精品推荐  
  本月推荐  
  友情赞助  

关于我们 | 联系我们 | 广告投放 | 留言反馈 | 免费程序 | 虚拟主机 | 网站建设 |  网站推广 |  google_sitemap baidu_sitemap RSS订阅
本站所有资源均来自互联网,如有侵犯您的版权或其他问题,请通知管理员,我们会在最短的时间回复您
Copyright © 2005-2015 Tc711.Com All Rights Reserved 版权所有·711网络   蜀ICP备05021915号
110网监备案 信息产业备案 不良信息举报