.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圆](https://i-blog.csdnimg.cn/blog_migrate/11370589eb8ce062380c76016aaeb6f3.jpeg)
如图,是用border-radius属性画出来的一个完美的实心圆。画实心圆的方法是高度和宽度相等,并且把border的宽度设为高度和宽度的一半。代码如下。
1
2
3
4
5
6
#circle {
width: 200px;
height: 200px;
background-color: #a72525;
-webkit-border-radius: 100px;
}
空心圆
![CSS3空心圆](https://i-blog.csdnimg.cn/blog_migrate/f656de2fe3e7aabd440c5c5db8a3214f.jpeg)
通过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虚线圆](https://i-blog.csdnimg.cn/blog_migrate/783fd743d103a00a83a2a0c24eecc004.jpeg)
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半圆](https://i-blog.csdnimg.cn/blog_migrate/b9d350f30c53a09a57c8fd28142a21bf.jpeg)
以本例来讲,半圆的画法是把宽度设为高度的一半,并且也只设置左上角和左下角的半径。代码如下。
1
2
3
4
5
6
#quartercircle {
width: 200px;
height: 200px;
background-color: #a72525;
-webkit-border-radius: 200px 0 0 0;
}
四分之一圆
![CSS3四分之一圆](https://i-blog.csdnimg.cn/blog_migrate/37c56f135768c6c0ec6892d74ca88a37.jpeg)
四分之一圆的实现方法是把高度和宽度设置为相等,只设置一个圆角,其半径等于高度或宽度。本例代码如下。
1
2
3
4
5
6
#quartercircle {
width: 200px;
height: 200px;
background-color: #a72525;
-webkit-border-radius: 200px 0 0 0;
}
更多玩法
看了这么多实例后,你完全可以自己创造更多玩法,如:
![semiquarter.jpg](https://i-blog.csdnimg.cn/blog_migrate/b4f81ecdeb9e7906bd1251173ceb1a81.jpeg)