本教程操作环境：windows7系统、css3&&html5版、dell g3电脑。
p+css制作四分之一圆主要是使用css3.0中的border-radius这个圆角隐藏属性.利用这一属性,我们可以画圆,画半圆,四分之三圆,四分之一圆等.以后我会更新……
如何使用border-radius属性,下面是border-radius属性最基本的使用方法:
.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画圆:
#circle { width: 200px; height: 200px; background-color: #a72525; -webkit-border-radius: 100px; /*-webkit-border-radius: 100%;*/}
仔细想想,一个正方形(200*200),里面最大的圆是的半径是:100.
2.空心圆代码:空心圆其实就是只有边框,空心部分填上其他颜色:
#circle { width: 200px; height: 200px; background-color: #efefef; /* can be set to transparent */ border: 3px #a72525 solid; -webkit-border-radius: 100px;}
同理虚线圆代码:
#circle { width: 200px; height: 200px; background-color: #efefef; /* can be set to transparent */ border: 3px #a72525 dashed; -webkit-border-radius: 100px 100px 100px 100px;}
3.半圆和四分之一圆代码:
#quartercircle { width: 200px; height: 200px; background-color: #a72525; -webkit-border-radius: 200px 0 0 0;}
<!doctype html><html> <head> <meta charset="utf-8"> <meta name="generator" content="editplus®"> <meta name="author" content=""> <meta name="keywords" content=""> <meta name="description" content=""> <title>document</title> <style type="text/css"> #quartercircle{ width: 200px; height: 200px; background-color: #ffffaa; border-radius:0 0 0 200px; -webkit-border-radius: 0 0 0 200px; -moz-border-radius: 0 0 0 200px; -ms-border-radius: 0 0 0 200px; -o-border-radius: 0 0 0 200px; } #quartercircle .dianxuan{ font-family:arial; color:gray; font-size:25px; padding-top: 55px; padding-left: 90px; transform:rotate(32deg); -ms-transform:rotate(32deg); /* internet explorer */ -moz-transform:rotate(32deg); /* firefox */ -webkit-transform:rotate(32deg); /* safari 和 chrome */ -o-transform:rotate(32deg); /* opera */ } </style> </head> <body> <div id="quartercircle"> <div>点选</div> </div> </body></html>
解释:
-moz(例如 -moz-border-radius)用于firefox
-webkit(例如：-webkit-border-radius)用于safari和chrome
其中border-radius各个浏览器支持情况如表:
浏览器支持性
firefox(2、3+) √
google chrome(1.0.154+…) √
google chrome(2.0.156+…) √
safari(3.2.1+ windows) √
internet explorer(ie7, ie8) ×
opera 9.6 ×
（学习视频分享：css视频教程）
以上就是css如何制作圆的详细内容。