CSS3:border-radius隐藏的威力
这篇文章将简述使用CSS3的border-radius来画圆、半圆和四分之一圆,并如何利用它们。
如何使用border-radius属性
下面是border-radius属性最基本的使用方法。
1 2 3 4 5 6 7 | .round { border-radius: 5px; /* 所有角都使用半径为5px的圆角,此属性为CSS3标准属性 */ -moz-border-radius: 5px; /* Mozilla浏览器的私有属性 */ -webkit-border-radius: 5px; /* Webkit浏览器的私有属性 */ border-radius: 5px 4px 3px 2px; /* 四个半径值分别是左上角、右上角、右下角和左下角 */ } |
关于在IE里怎么实现圆角,可以看《Excellent Article Which Included Ways to Achieve Rounded Corners in IE》这篇文章。
1.用border-radius画圆
实心圆

如图,是用border-radius属性画出来的一个完美的实心圆。画实心圆的方法是高度和宽度相等,并且把border的宽度设为高度和宽度的一半。代码如下。
1 2 3 4 5 6 | #circle { width: 200px; height: 200px; background-color: #a72525; -webkit-border-radius: 100px; } |
空心圆

通过border-radius属性画空心圆和画实心圆的方法差不多,只是border的宽度只能小于高度和宽度的一半。代码如下。
1 2 3 4 5 6 7 | #circle { width: 200px; height: 200px; background-color: #efefef; /* Can be set to transparent */ border: 3px #a72525 solid; -webkit-border-radius: 100px; } |
虚线圆

1 2 3 4 5 6 7 | #circle { width: 200px; height: 200px; background-color: #efefef; /* Can be set to transparent */ border: 3px #a72525 dashed; -webkit-border-radius: 100px 100px 100px 100px; } |
2.半圆和四分之一圆
半圆

以本例来讲,半圆的画法是把宽度设为高度的一半,并且也只设置左上角和左下角的半径。代码如下。
1 2 3 4 5 6 | #quartercircle { width: 200px; height: 200px; background-color: #a72525; -webkit-border-radius: 200px 0 0 0; } |
四分之一圆

四分之一圆的实现方法是把高度和宽度设置为相等,只设置一个圆角,其半径等于高度或宽度。本例代码如下。
1 2 3 4 5 6 | #quartercircle { width: 200px; height: 200px; background-color: #a72525; -webkit-border-radius: 200px 0 0 0; } |
更多玩法
看了这么多实例后,你完全可以自己创造更多玩法,如:

虚线的半圆和四分之一圆。

配合position属性做一个月亮。

配合position、RGBa和z-index这些属性做一个本文开头的色彩维恩图。




沙发再看!
学习了,但貌似现在国内还是不太适合,等css3再普及一下
杯具,板凳也给坐了 ~
很可惜这是CSS3,支持的浏览器有限啊
IE不支持这个属性的说
我一直以为 CSS3 圆角只能做圆角,原来还能画圆,学习了。其实现在也只有 IE 和 Opera 不支援,其他的浏览器都支援,相信普及之日不远矣!
@zwwooooo
如果网站不面向IE用户的话,用也无妨
@万戈
我这是提前预习,哈哈
@welee
一切都要活学活用嘛,要IE支持的话目前还比较难说,Opera一向跟着标准走,还是等CSS3定下来吧
囧。。评论被提示spamer
@A.shun
css3强大啊,期待普及的一天
关注圆角在各个浏览器的兼容问题,我的博客只有在firefox下才是圆角,ie下有没有好的圆角处理方法
个人以为GTalk的Bubble主题所使用的圆角是比较完美的解决方案
看上去的确很强大
要用CSS3 得先干掉IE6
太专业了1
有微博客的感觉。。。。这么多代码。
ie6和ie8呢?
@A.shun
提示spam就换邮箱吧
@阿正
你可以尝试使用jQuery插件使在IE下也显示圆角的
@钢盅郭子
Gtalk是桌面端软件,怎么同呢?
@疾风
干掉IE6我绝对支持,可是IE8也是不支持CSS3的
@卢松松
目前只能用JavaScript的方法快速地在IE里做出圆角咯
@bolo
%userprofile%\Local Settings\Application Data\Google\Google Talk\themes\system\chat\Bubble\Contents\Resources\main.css
很好、很有帮助!