Div+Css制作圆
Div+Css制作四分之一圆主要是使用Css3.0中的border-radius这个圆角隐藏属性.利用这一属性,我们可以画圆,画半圆,四分之三圆,四分之一圆等.以后我会更新……
如何使用border-radius属性,下面是border-radius属性最基本的使用方法:
1 .round { 2 border-radius: 5px; /* 所有角都使用半径为5px的圆角,此属性为CSS3标准属性 */ 3 -moz-border-radius: 5px; /* Mozilla浏览器的私有属性 */ 4 -webkit-border-radius: 5px; /* Webkit浏览器的私有属性 */ 5 border-radius: 5px 4px 3px 2px; /* 四个半径值分别是左上角、右上角、右下角和左下角 */ 6 }
1.用border-radius画圆:
1 #circle { 2 width: 200px; 3 height: 200px; 4 background-color: #a72525; 5 -webkit-border-radius: 100px; 6 }
仔细想想,一个正方形(200*200),里面最大的圆是的半径是:100.
2.空心圆代码:空心圆其实就是只有边框,空心部分填上其他颜色:
1 #circle { 2 width: 200px; 3 height: 200px; 4 background-color: #efefef; /* Can be set to transparent */ 5 border: 3px #a72525 solid; 6 -webkit-border-radius: 100px; 7 }
同理虚线圆代码:
1 #circle { 2 width: 200px; 3 height: 200px; 4 background-color: #efefef; /* Can be set to transparent */ 5 border: 3px #a72525 dashed; 6 -webkit-border-radius: 100px 100px 100px 100px; 7 }
3.半圆和四分之一圆代码:
1 #quartercircle { 2 width: 200px; 3 height: 200px; 4 background-color: #a72525; 5 -webkit-border-radius: 200px 0 0 0; 6 }
1 <!doctype html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="Generator" content="EditPlus®"> 6 <meta name="Author" content=""> 7 <meta name="Keywords" content=""> 8 <meta name="Description" content=""> 9 <title>Document</title> 10 <style type="text/css"> 11 #quartercircle{ 12 width: 200px; 13 height: 200px; 14 background-color: #ffffaa; 15 border-radius:0 0 0 200px; 16 -webkit-border-radius: 0 0 0 200px; 17 -moz-border-radius: 0 0 0 200px; 18 -ms-border-radius: 0 0 0 200px; 19 -o-border-radius: 0 0 0 200px; 20 } 21 #quartercircle .dianxuan{ 22 font-family:Arial; 23 color:gray; 24 font-size:25px; 25 padding-top: 55px; 26 padding-left: 90px; 27 transform:rotate(32deg); 28 -ms-transform:rotate(32deg); /* Internet Explorer */ 29 -moz-transform:rotate(32deg); /* Firefox */ 30 -webkit-transform:rotate(32deg); /* Safari 和 Chrome */ 31 -o-transform:rotate(32deg); /* Opera */ 32 } 33 34 </style> 35 </head> 36 <body> 37 <div id="quartercircle"> 38 <div class="dianxuan">点选</div> 39 </div> 40 </body> 41 </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 | × |
更多玩法,以后我会更新……