Home > Develop > CSS3:border-radius隐藏的威力

CSS3:border-radius隐藏的威力

2010/02/06 19 comments

Colour venn diagram这篇文章将简述使用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画圆

实心圆

CSS3圆

如图，是用border-radius属性画出来的一个完美的实心圆。画实心圆的方法是高度和宽度相等，并且把border的宽度设为高度和宽度的一半。代码如下。

1
2
3
4
5
6

#circle {
	width: 200px;
	height: 200px;
	background-color: #a72525;
	-webkit-border-radius: 100px;
}

空心圆

CSS3空心圆

通过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;
}

虚线圆

CSS3虚线圆

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.半圆和四分之一圆

半圆

CSS3半圆

以本例来讲，半圆的画法是把宽度设为高度的一半，并且也只设置左上角和左下角的半径。代码如下。

1
2
3
4
5
6

#quartercircle {
	width: 200px;
	height: 200px;
	background-color: #a72525;
	-webkit-border-radius: 200px 0 0 0;
}

四分之一圆

CSS3四分之一圆

四分之一圆的实现方法是把高度和宽度设置为相等，只设置一个圆角，其半径等于高度或宽度。本例代码如下。

1
2
3
4
5
6

#quartercircle {
	width: 200px;
	height: 200px;
	background-color: #a72525;
	-webkit-border-radius: 200px 0 0 0;
}

更多玩法

看了这么多实例后，你完全可以自己创造更多玩法，如：

semiquarter.jpg

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

moon.jpg

配合position属性做一个月亮。

CSS3 Colour venn diagram

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

原文：The hidden power of border-radius

Categories: Develop Tags:

19 comments.

  1. zwwooooo
    2010/02/06 at 11:01 am

    沙发再看！

    Reply | #1
  2. zwwooooo
    2010/02/06 at 11:05 am

    学习了，但貌似现在国内还是不太适合，等css3再普及一下

    Reply | #2
  3. evlos
    2010/02/06 at 11:16 am

    杯具，板凳也给坐了 ~

    Reply | #3
  4. 万戈
    2010/02/06 at 11:32 am

    很可惜这是CSS3，支持的浏览器有限啊

    Reply | #4
  5. Jutoy
    2010/02/06 at 12:39 pm

    IE不支持这个属性的说

    Reply | #5
  6. welee
    2010/02/07 at 9:01 pm

    我一直以为 CSS3 圆角只能做圆角，原来还能画圆，学习了。其实现在也只有 IE 和 Opera 不支援，其他的浏览器都支援，相信普及之日不远矣！

    Reply | #6
  7. bolo
    2010/02/07 at 9:30 pm

    @zwwooooo
    如果网站不面向IE用户的话，用也无妨
    @万戈
    我这是提前预习，哈哈
    @welee
    一切都要活学活用嘛，要IE支持的话目前还比较难说，Opera一向跟着标准走，还是等CSS3定下来吧

    Reply | #7
  8. A.shun
    2010/02/07 at 10:53 pm

    囧。。评论被提示spamer

    Reply | #8
  9. A.shun
    2010/02/07 at 10:54 pm

    @A.shun
    css3强大啊，期待普及的一天

    Reply | #9
  10. 阿正
    2010/02/08 at 12:39 am

    关注圆角在各个浏览器的兼容问题，我的博客只有在firefox下才是圆角，ie下有没有好的圆角处理方法

    Reply | #10
  11. 钢盅郭子
    2010/02/08 at 9:31 am

    个人以为GTalk的Bubble主题所使用的圆角是比较完美的解决方案

    Reply | #11
  12. 先看看
    2010/02/08 at 10:41 am

    看上去的确很强大

    Reply | #12
  13. 疾风
    2010/02/08 at 12:00 pm

    要用CSS3 得先干掉IE6

    Reply | #13
  14. 路大侠
    2010/02/08 at 12:41 pm

    太专业了1

    Reply | #14
  15. 苏囧
    2010/02/08 at 3:59 pm

    有微博客的感觉。。。。这么多代码。

    Reply | #15
  16. 卢松松
    2010/02/08 at 7:05 pm

    ie6和ie8呢？

    Reply | #16
  17. bolo
    2010/02/08 at 7:18 pm

    @A.shun
    提示spam就换邮箱吧
    @阿正
    你可以尝试使用jQuery插件使在IE下也显示圆角的
    @钢盅郭子
    Gtalk是桌面端软件，怎么同呢？
    @疾风
    干掉IE6我绝对支持，可是IE8也是不支持CSS3的
    @卢松松
    目前只能用JavaScript的方法快速地在IE里做出圆角咯

    Reply | #17
  18. 钢盅郭子
    2010/02/09 at 9:18 am

    @bolo

    %userprofile%\Local Settings\Application Data\Google\Google Talk\themes\system\chat\Bubble\Contents\Resources\main.css

    Reply | #18
  19. 海龟来了
    2010/02/10 at 5:52 pm

    很好、很有帮助！

    Reply | #19
X [￥15]