CSS教程:CSS3新功能和新特性

作者佚名技术来源 CSS技术浏览发布时间 2012-02-25

或

Code:

border-image: url(border.png) 27 27 27 27 stretch stretch;

Border-radius：用CSS创建圆角边框！
W3C已经在CSS3中提供了一些新的选项，border-radius是其中之一，Mozilla/Firefox和Safari 3都已经实现了这个允许你创建圆角盒模型的函数。例如：

Code:

-moz-border-radius: 5px;
-webkit-border-radius: 5px;

这些不同的角可以被分别控制，代码如下：

Code:

-moz-border-radius-topleft / -webkit-border-top-left-radius
-moz-border-radius-topright / -webkit-border-top-right-radius
-moz-border-radius-bottomleft / -webkit-border-bottom-left-radius
-moz-border-radius-bottomright / -webkit-border-bottom-right-radius

Box-shadow，CSS3的最牛逼的新特性之一
CSS3背景和边框模块拥有一个非常好的新特性名叫box-shadow，它已经在Safari 3+和Firefox 3.1 (Alpha)中得以实现。其规则提及了多重阴影，但是作者已经对此提出了质疑，并且Safari 3并没有将其实现。
此属性由3个长度参数和一个颜色参数组成，其中长度参数有：
1. 阴影的横向位移量，正值意味着阴影靠右，负值则靠左；
2. 阴影的纵向位移量，负值意味着阴影靠上，正值则靠下；
3. 褪色渐变半径，如果值为0则阴影会被直接切断，值越高褪色渐变的效果就越明显。例如：

Code:

box-shadow: 10px 10px 5px #888;
padding: 5px 5px 5px 15px;

凌众科技专业提供服务器租用、服务器托管、企业邮局、虚拟主机等服务，公司网站：http://www.lingzhong.cn 为了给广大客户了解更多的技术信息，本技术文章收集来源于网络,凌众科技尊重文章作者的版权，如果有涉及你的版权有必要删除你的文章，请和我们联系。以上信息与文章正文是不可分割的一部分,如果您要转载本文章,请保留以上信息，谢谢!

上一页 1 2 3 4 5 6 7 8 9 10 下一页

分享到：更多

你可能对下面的文章感兴趣

上一篇: YUICompressor:高效压缩CSS和JS代码的工具下一篇: 50个强大璀璨的CSS3/JS技术运用实例

关于CSS教程:CSS3新功能和新特性的所有评论

随机推荐