CSS border-radius
2013-01-07 22:29 lefan 阅读(435) 评论(0) 编辑 收藏 举报CSS3属性:border-radius
border-radius : none | <length>{1,4} [ / <length>{1,4} ]?
相关属性border-top-right-radius ,
border-bottom-right-radius ,
border-bottom-left-radius ,
border-top-left-radius
取值:
<length>:由浮点数字和单位标识符组成的长度值。不可为负值。
border-top-left-radius:
由浮点数字和单位标识符组成的长度值。不可为负值。
说明:
第一个值是水平半径。如果第二个值省略,则它等于第一个值,这时这个角就是一个四分之一圆角。如果任意一个值为0,则这个角是矩形,不会是圆的。值不允许是负值。
用这个属性可以很容易做出圆角效果,当然,也可以做出圆形效果。原理很简单,“正方形的内切圆的半径等于正方形边长的一半”。
1.下面就做一个的圆。
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>CSS3 border-radius</title> 6 <style> 7 .circle { 8 background-color:#008080; 9 width: 400px; /* div的宽和高为400px即正方形的边长为400px */ 10 height: 400px; 11 text-align: center; 12 13 -moz-border-radius: 200px; /* 圆的半径为边长的一半,即200px */ 14 -webkit-border-radius: 200px; 15 border-radius: 200px; 16 17 display: -moz-box; 18 display: -webkit-box; 19 display: box; 20 21 -moz-box-orient: horizontal; 22 -webkit-box-orient: horizontal; 23 box-orient: horizontal; 24 25 -moz-box-pack: center; 26 -moz-box-align: center; 27 28 -webkit-box-pack: center; 29 -webkit-box-align: center; 30 31 box-pack: center; 32 box-align: center; 33 34 font:normal 80px/100% Arial; 35 text-shadow:1px 1px 1px #000; 36 color:#fff; 37 } 38 </style> 39 </head> 40 <body> 41 <div class="circle"> 42 circle 43 </div> 44 </body> 45 </html>
demo:
2.CSS3画个chrome标志
1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="utf-8" /> 5 <title>Chrome LOGO</title> 6 <link href="css/test.css" type="text/css" rel="stylesheet" /> 7 <style> 8 *{ 9 margin:0; 10 padding:0; 11 } 12 body{ 13 width:500px; 14 height:500px; 15 margin:0 auto; 16 } 17 .back{ 18 width:440px; 19 height:440px; 20 background:#df2228; 21 position:relative; 22 margin:auto; 23 border-radius:220px; 24 box-shadow:0 0 10px 5px #aaa; 25 } 26 .redwrap,.greenwrap,.yellowwrap{ 27 width:396px; 28 height:124px; 29 margin:auto; 30 overflow:hidden; 31 } 32 .greenwrap{ 33 -webkit-transform-origin:162px 159px; 34 -webkit-transform:rotate(-120deg); 35 -moz-transform-origin:162px 159px; 36 -moz-transform:rotate(-120deg); 37 -o-transform-origin:162px 159px; 38 -o-transform:rotate(-120deg); 39 } 40 .yellowwrap{ 41 -webkit-transform-origin:271px 97px; 42 -webkit-transform:rotate(120deg); 43 -moz-transform-origin:271px 97px; 44 -moz-transform:rotate(120deg); 45 -o-transform-origin:271px 97px; 46 -o-transform:rotate(120deg); 47 } 48 .redwrap div,.greenwrap div,.yellowwrap div{ 49 width:440px; 50 height:220px; 51 background:#df2228; 52 border-top-left-radius:220px; 53 border-top-right-radius:220px; 54 margin-left:-21px; 55 } 56 .greenwrap div{ 57 background:#4db749; 58 } 59 .yellowwrap div{ 60 background:#fcd109; 61 overflow:hidden; 62 } 63 .redpatch{ 64 position:absolute; 65 top:0; 66 right:19px; 67 width:198px; 68 height:124px; 69 overflow:hidden; 70 } 71 .redpatch div{ 72 background:#df2228; 73 border-top-right-radius:220px; 74 width:220px; 75 height:220px; 76 } 77 .greenpatch{ 78 width:199px; 79 height:157px; 80 position:absolute; 81 top:124px; 82 left:220px; 83 background:#4db749; 84 -webkit-transform-origin:96px 153px; 85 -webkit-transform:rotate(-120deg); 86 -moz-transform-origin:96px 153px; 87 -moz-transform:rotate(-120deg); 88 -o-transform-origin:96px 153px; 89 -o-transform:rotate(-120deg); 90 } 91 .yellowpatch{ 92 width:199px; 93 height:157px; 94 position:absolute; 95 top:124px; 96 left:220px; 97 background:#fcd109; 98 } 99 .white{ 100 width:195px; 101 height:195px; 102 border-radius:195px; 103 background:#e9ebea; 104 position:absolute; 105 top:50%; 106 left:50%; 107 margin-top:-96px; 108 margin-left:-96px; 109 } 110 .blue{ 111 width:164px; 112 height:164px; 113 position:absolute; 114 left:50%; 115 top:50%; 116 margin-left:-82px; 117 margin-top:-82px; 118 background:-webkit-linear-gradient(top,#83b4dd,#115b93); 119 background:-moz-linear-gradient(top,#83b4dd,#115b93); 120 background:-o-linear-gradient(top,#83b4dd,#115b93); 121 border-radius:82px; 122 } 123 </style> 124 </head> 125 <body> 126 <div class="back"> 127 <div class="redwrap"> 128 <div> 129 </div> 130 </div> 131 <div class="greenwrap"> 132 <div> 133 </div> 134 </div> 135 <div class="greenpatch"> 136 </div> 137 <div class="yellowwrap"> 138 <div> 139 </div> 140 </div> 141 <div class="redpatch"> 142 <div> 143 </div> 144 </div> 145 <div class="yellowpatch"> 146 </div> 147 <div class="white"> 148 </div> 149 <div class="blue"> 150 </div> 151 </div> 152 </body> 153 </html>
demo:
3.画个圆角
1 <!DOCTYPE html > 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 5 <title>Border-radius</title> 6 </head> 7 <body> 8 <div style="border-width: 1px; 9 border-style: solid; 10 -moz-border-radius: 11px; 11 -khtml-border-radius: 11px; 12 -webkit-border-radius: 11px; 13 border-radius: 11px; 14 padding:5px;"> in Firefox and Safari border-radius </div> 15 </body> 16 </html>
demo:
参考:
1.http://www.w3cfuns.com/thread-5593371-1-1.html
2.http://www.cnblogs.com/lianjun/archive/2011/03/11/1981606.html