2011 - 04 - 20

CSS3:border-radius隐藏的威力

Published by at 10:35 under 未分类

这篇文章将简述使用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

20 responses so far

20 Responses to “CSS3:border-radius隐藏的威力”

  1. 济南游戏学院on 27 四 2011 at 10:16

    串个门,看有什么东西可以顺手牵走的,嘿嘿

  2. WILDEN气动隔膜泵on 28 四 2011 at 13:19

    这个月亮做的是相当不错。

  3. 济南汇众on 03 五 2011 at 16:03

    随便逛逛

  4. 浙江藏獒园on 01 六 2011 at 12:44

    专业,学习下

  5. 离岸公司on 15 六 2011 at 15:41

    博主你的博文不错啊,我会继续支持你的

  6. 识字on 04 七 2011 at 20:20

    我来逛逛,顺便帮博主顶一下,嘿嘿。

  7. sunshy1024@gmail.comon 05 十 2011 at 22:12

    恩进来学习一下

  8. ads for black fridayon 21 十一 2011 at 13:05

    蛮有用的 不错

  9. 路过on 14 五 2014 at 14:58

    你写的半圆和四分之一圆CSS属性是一样的吧?怎么弄半圆的?

  10. 卡卡on 02 三 2015 at 15:57

    半圆的画法是高度设为宽度的一半,

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

  11. 比卡丘on 08 四 2015 at 14:50

    帮大忙了

  12. 刘亮on 03 九 2015 at 15:09

    #quartercircle {
    width: 200px;
    height: 100px;
    background-color: #a72525;
    -webkit-border-radius: 0 0 100px 100px;
    }
    也可以实现半圆,和您的代码有什么区别?

  13. waner55on 19 十 2015 at 18:05

    @刘亮
    他半圆的代码写错了啊。就应该你这样写。。。

  14. Bataon 18 十一 2015 at 14:02

    IE浏览器都不兼容。。

  15. 管理员on 18 三 2016 at 16:23

    刚好让大哥好人

  16. 管理员on 18 三 2016 at 16:23

    怒叫你姐姐

  17. administratoron 28 七 2016 at 13:51

    on year 2011,it’s so pop. wow!

  18. ggon 01 八 2016 at 16:42

    不兼容火狐

  19. 月亮on 05 六 2017 at 11:30

    body {
    background: #000;
    }
    #one {
    position: relative;
    width: 200px;
    height: 200px;
    background: #fff;
    border-radius: 100px;
    }
    #two {
    position: absolute;
    width: 200px;
    height: 200px;
    background: #000;
    left: 40px;
    border-radius: 100px;
    }

  20. PDM 系统on 04 七 2017 at 15:04

    功能很强大,支持楼主

Trackback URI | Comments RSS

评论