css属性

您当前位置:匀阳教程网 >> 网页制作 >> css教程 >> css属性 >> 浏览文章

如何利用CSS属性box-shadow实现边框阴影效果详解

【字体: 】 浏览量:
利用css3实现边框的阴影效果首先需要了解下box-shadow这个属性

box-shadow

先来说IE,IE不支持box-shadow属性,但是上面提到的两个滤镜都可以用来实现阴影效果。这也就是说,IE并没有把文字阴影和盒子阴影区分!这就会出现一些问题:元素中的文字会继承元素的阴影设置。但是如果你不定义该元素的background和border,就只会出现文字阴影,如果只定义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特立独行,还在坚持它那蹩脚的滤镜,这真是个杯具。

分享到:

网友评论:


热门教程
猜你喜欢的教程
Copyright 2010-2014 Powered by yysem.net
友情链接咨询:1143412387 304366329 豫ICP备11021559号
本网站部分内容来自于互联网以及相关书籍等各方,仅作技术交流学习之用,如果侵权敬请告知,我们会及时改正。