网络编程
位置:首页>> 网络编程>> 网页设计>> 5个CSS3技术实现设计增强(3)

5个CSS3技术实现设计增强(3)

作者:暴风彬彬 来源:彬Go 发布时间:2009-09-04 17:04:00 

标签:设计,css3,技术

2.圆角

目前支持的浏览器:Apple Safari 3+, Firefox 1+, Google Chrome 1+

边框半径用于设置和模型每个角的曲率,仿佛有一对与特定的角落虚圆半径(r):


border-radius: r;

虽然border-radius是未来CSS3的一部分,不过现在无论Mozilla(Firefox)和Webkit(Safari和Chrome)都已经有了自己的圆角版本。

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

你也可以单独设置某个角的半径:

你也可以单独设置某个角的半径:

CSS3

Mozilla

WebKit

border-top-right-radius

-moz-border-radius-topright

-webkit-border-top-right-radius

border-bottom-right-radius

-moz-border-radius-bottomright

-webkit-border-bottom-right-radius

border-bottom-left-radius

-moz-border-radius-bottomleft

-webkit-border-bottom-left-radius

border-top-left-radius

-moz-border-radius-topleft

-webkit-border-top-left-radius

border-radius

-moz-border-radius

-webkit-border-radius

0
投稿

猜你喜欢

手机版 网络编程 asp之家 www.aspxhome.com