关闭

CSS3:border-radius隐藏的威力

136人阅读 评论(0) 收藏 举报
分类:
.round {
	border-radius: 5px; /* 所有角都使用半径为5px的圆角,此属性为CSS3标准属性 */
	-moz-border-radius: 5px; /* Mozilla浏览器的私有属性 */
	-webkit-border-radius: 5px; /* Webkit浏览器的私有属性 */

	border-radius: 5px 4px 3px 2px; /* 四个半径值分别是左上角、右上角、右下角和左下角 */
}

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


0
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:30405次
    • 积分:806
    • 等级:
    • 排名:千里之外
    • 原创:48篇
    • 转载:26篇
    • 译文:0篇
    • 评论:0条