css3のborder-radius
css3のborder-radius
今天主要练习了一下border-radius这个属性，这个是最常用的属性，所以先从它开始学习和总结吧。
我觉得需要注意以下几点：
1.书写规范：
-webkit-border-radius-top-left 其中top left是分开写的用-来连接，而-moz-border-radius-topleft 这个topleft是连在一起写的，不要记混了。
2.简写方式：
border-radius:2em;不用多说了
border-radius:2em 3em;是指左上角=右下角=2em 右上角=左下角=3em
border-radius:2em 3em 4em;左上角=2em 右上角=3em 右下角=4em 左下角=3em
border-radius:2em 3em 4em 5em;遵循顺时针原则。。
3.特别要注意这个：水平半径≠垂直半径
border-radius:10em/5em;
水平半径：10em 垂直半径：5em;
我是怎么注意到这个的呢，说起来很有意思，第一开始，接触到border-radius，我就试着写，然后测试，代码如下：
css
1 .exg { 2 border-radius:5em 10em; 3 -moz-border-radius:5em 10em; 4 -webkit-border-radius:5em 10em; 5 }
html
<div class="exg wrap"></div>
结果发现谷歌的显示竟然和其他浏览器都不一样，当时就特别差异，然后我就顺藤摸瓜，最终明白了，原来是这个样子。很有意思，截图看下：
谷歌的：
火狐的：
好了，其他的大概没有了吧，那么就看看下面这个网页吧，请大家鉴赏下，亲~给好评哦！
1 <!DOCTYPE HTML> 2 <html> 3 <head> 4 <meta charset=utf-8> 5 <title>border-redius</title> 6 <style type="text/css"> 7 .wrap { 8 color: #fff; 9 font-family: Arial; 10 border: 1px solid #dfdfdf; 11 padding: 10px 12em; 12 background: #bbb; 13 margin-bottom: 10px; 14 } 15 h2 { 16 font-size: 14px; 17 font-weight: bold; 18 line-height: 24px; 19 } 20 /*水平与垂直半径相等*/ 21 .exg_1 { 22 border-radius: 5em; 23 -moz-border-radius:5em; 24 -webkit-border-radius:5em; 25 } 26 .exg_2 { 27 border-radius: 5em 10em; 28 -moz-border-radius-topleft:5em; 29 -moz-border-radius-topright:10em; 30 -moz-border-radius-bottomright:10em; 31 -moz-border-radius-bottomleft:5em; 32 -webkit-border-radius-top-left:5em; 33 -webkit-border-radius-top-right:10em; 34 -webkit-border-radius-bottom-right:10em; 35 -webkit-border-radius-bottom-left:5em; 36 } 37 .exg_3 { 38 border-radius: 10em 20em 30em; 39 -moz-border-radius-topleft:10em; 40 -moz-border-radius-topright:20em; 41 -moz-border-radius-bottomright:30em; 42 -moz-border-radius-bottomleft:20em; 43 -webkit-border-radius-top-left:10em; 44 -webkit-border-radius-top-right:20em; 45 -webkit-border-radius-bottom-right:30em; 46 -webkit-border-radius-bottom-left:20em; 47 } 48 .exg_4 { 49 border-radius: 10em 20em 30em 40em; 50 -moz-border-radius-topleft:10em; 51 -moz-border-radius-topright:20em; 52 -moz-border-radius-bottomright:40em; 53 -moz-border-radius-bottomleft:30em; 54 -webkit-border-radius-top-left:10em; 55 -webkit-border-radius-top-right:20em; 56 -webkit-border-radius-bottom-right:40em; 57 -webkit-border-radius-bottom-left:30em; 58 } 59 /*水平与垂直半径不等*/ 60 .exg_01 { 61 border-radius: 10em/5em; 62 -moz-border-radius:10em/5em; 63 -webkit-border-radius:10em/5em; 64 } 65 .exg_02 { 66 border-radius: 10em 20em/5em 10em; 67 -moz-border-radius-topleft:10em/5em; 68 -moz-border-radius-topright:20em/10em; 69 -moz-border-radius-bottomright:10em/5em; 70 -moz-border-radius-bottomleft:20em/10em; 71 -webkit-border-radius-top-left:10em/5em; 72 -webkit-border-radius-top-right:20em/5em; 73 -webkit-border-radius-bottom-right:10em/5em; 74 -webkit-border-radius-bottom-left:20em/5em; 75 } 76 .exg_03 { 77 border-radius: 10em 20em 30em/5em 10em 15em; 78 -moz-border-radius-topleft:10em/5em; 79 -moz-border-radius-topright:20em/10em; 80 -moz-border-radius-bottomright:30em/15em; 81 -moz-border-radius-bottomleft:20em/10em; 82 -webkit-border-radius-top-left:10em/5em; 83 -webkit-border-radius-top-right:20em/10em; 84 -webkit-border-radius-bottom-right:30em/15em; 85 -webkit-border-radius-bottom-left:20em/10em; 86 } 87 .exg_04 { 88 border-radius: 10em 20em 30em 40em/5em 10em 15em 20em; 89 -moz-border-radius-topleft:10em/5em; 90 -moz-border-radius-topright:20em/10em; 91 -moz-border-radius-bottomright:30em/15em; 92 -moz-border-radius-bottomleft:40em/20em; 93 } 94 h3 { 95 font-family: Arial; 96 font-size: 14px; 97 line-height: 24px; 98 } 99 ul { 100 font-family: Arial; 101 font-size: 14px; 102 background: #bbb; 103 line-height: 24px; 104 color: #ffffff; 105 padding:10px 40px; 106 } 107 p { 108 font-family: Arial; 109 text-indent: 24px; 110 line-height: 24px; 111 margin: 0; 112 padding:0; 113 } 114 .exg { 115 padding:5em; 116 border-radius:5em 10em; 117 -moz-border-radius:5em 10em; 118 -webkit-border-radius:5em 10em; 119 } 120 </style> 121 122 </head> 123 <body> 124 <div class="exg wrap"></div> 125 <h2>水平与垂直半径相同</h2> 126 <!-- border-radius 一般写法圆角设置相同 --> 127 <div class="exg_1 wrap"> 128 <h2>提供1个参数</h2> 129 <p>.exg_1 {</p> 130 <p>border-radius: 5em;</p> 131 <p>-moz-border-radius:5em;</p> 132 <p>-webkit-border-radius:5em;</p> 133 <p>}</p> 134 </div> 135 <div class="exg_2 wrap"> 136 <h2>提供两个参数即:border-radius:5em 20em 5em 20em</h2> 137 <p>.exg_2 {</p> 138 <p>border-radius: 5em 10em;</p> 139 <p>-moz-border-radius-topleft:5em;</p> 140 <p>-moz-border-radius-topright:10em;</p> 141 <p>-moz-border-radius-bottomright:10em;</p> 142 <p>-moz-border-radius-bottomleft:5em;</p> 143 <p>-webkit-border-radius-top-left:5em;</p> 144 <p>-webkit-border-radius-top-right:10em;</p> 145 <p>-webkit-border-radius-bottom-right:10em;</p> 146 <p>-webkit-border-radius-bottom-left:5em;</p> 147 <p>}</p> 148 </div> 149 <div class="exg_3 wrap"> 150 <h2>提供三个参数即：border-radius:10em 20em 30em 20em;</h2> 151 <p>.exg_3 {</p> 152 <p>border-radius: 10em 20em 30em;</p> 153 <p>-moz-border-radius-topleft:10em;</p> 154 <p>-moz-border-radius-topright:20em;</p> 155 <p>-moz-border-radius-bottomright:30em;</p> 156 <p>-moz-border-radius-bottomleft:20em;</p> 157 <p>-webkit-border-radius-top-left:10em;</p> 158 <p>-webkit-border-radius-top-right:20em;</p> 159 <p>-webkit-border-radius-bottom-right:30em;</p> 160 <p>-webkit-border-radius-bottom-left:20em;</p> 161 <p>}</p> 162 <p>}</p> 163 </div> 164 <div class="exg_4 wrap"> 165 <h2>提供四个参数</h2> 166 <p>.exg_4 {</p> 167 <p>border-radius: 10em 20em 30em 40em;</p> 168 <p>-moz-border-radius-topleft:10em;</p> 169 <p>-moz-border-radius-topright:20em;</p> 170 <p>-moz-border-radius-bottomright:40em;</p> 171 <p>-moz-border-radius-bottomleft:30em;</p> 172 <p>-webkit-border-radius-top-left:10em;</p> 173 <p>-webkit-border-radius-top-right:20em;</p> 174 <p>-webkit-border-radius-bottom-right:40em;</p> 175 <p>-webkit-border-radius-bottom-left:30em;</p> 176 <p>}</p> 177 </div> 178 <h2>水平与垂直半径不等</h2> 179 <div class="exg_01 wrap"> 180 <h2>提供1个参数:水平半径/垂直半径</h2> 181 <p>.exg_1 {</p> 182 <p>border-radius: 10em/5em;</p> 183 <p>-moz-border-radius:10em/5em;</p> 184 <p>-webkit-border-radius:10em/5em;</p> 185 <p>}</p> 186 </div> 187 <div class="exg_02 wrap"> 188 <h2>提供两个参数即:border-radius:10em 20em 10em 20em/5em 10em 5em 10em</h2> 189 <p>.exg_2 {</p> 190 <p>border-radius: 10em 20em;</p> 191 <p>-moz-border-radius-topleft:10em/5em;</p> 192 <p>-moz-border-radius-topright:20em/10em;</p> 193 <p>-moz-border-radius-bottomright:10em/5em;</p> 194 <p>-moz-border-radius-bottomleft:20em/10em;</p> 195 <p>-webkit-border-radius-top-left:10em/5em;</p> 196 <p>-webkit-border-radius-top-right:20em/10em;</p> 197 <p>-webkit-border-radius-bottom-right:10em/5em;</p> 198 <p>-webkit-border-radius-bottom-left:20em/10em;</p> 199 <p>}</p> 200 </div> 201 <div class="exg_03 wrap"> 202 <h2>提供三个参数即：border-radius:10em 20em 30em 20em/5em 10em 15em 10em;</h2> 203 <p>.exg_3 {</p> 204 <p>border-radius: 10em 20em 30em/5em 10em 15em;</p> 205 <p>-moz-border-radius-topleft:10em/5em;</p> 206 <p>-moz-border-radius-topright:20em/10em;</p> 207 <p>-moz-border-radius-bottomright:30em/15em;</p> 208 <p>-moz-border-radius-bottomleft:20em/10em;</p> 209 <p>-webkit-border-radius-top-left:10em/5em;</p> 210 <p>-webkit-border-radius-top-right:20em/10em;</p> 211 <p>-webkit-border-radius-bottom-right:30em/15em;</p> 212 <p>-webkit-border-radius-bottom-left:20em/10em;</p> 213 <p>}</p> 214 <p>}</p> 215 </div> 216 <div class="exg_04 wrap"> 217 <h2>提供四个参数</h2> 218 <p>.exg_4 {</p> 219 <p>border-radius: 10em 20em 30em 40em/5em 10em 15em 20em;</p> 220 <p>-moz-border-radius-topleft:10em/5em;</p> 221 <p>-moz-border-radius-topright:20em/10em;</p> 222 <p>-moz-border-radius-bottomright:40em/20em;</p> 223 <p>-moz-border-radius-bottomleft:30em/15em;</p> 224 <p>-webkit-border-radius-top-left:10em/5em;</p> 225 <p>-webkit-border-radius-top-right:20em/10em;</p> 226 <p>-webkit-border-radius-bottom-right:40em/20em;</p> 227 <p>-webkit-border-radius-bottom-left:30em/15em;</p> 228 <p>}</p> 229 </div> 230 <div class="border_radius_message"> 231 <ul> 232 <li>border-radius:长度</li> 233 <li>Firefox支持border-radius(圆角)：-moz-border-radius:2px;</li> 234 <li>webkit内核的Safari和Chrome支持border-radius(圆角)：-webkit-border-radius:2px;</li> 235 <li>Opera支持border-radius(圆角)：box-shadow:2px;</li> 236 <li>IE不支持Box Shadow(阴影)</li> 237 </ul> 238 <h3>我们还可以随意指定圆角的位置，左上、左下、右上、右下四个方向。在firefox、webkit内核的Safari和Chrome和opera（css3）、中的具体书写格式如下：</h3> 239 <ul> 240 <li>-moz-border-radius-topleft / -webkit-border-top-left-radius / border-top-left-radius</li> 241 <li>-moz-border-radius-topright / -webkit-border-top-right-radius / border-top-right-radius</li> 242 <li>-moz-border-radius-bottomleft / -webkit-border-bottom-left-radius / border-bottom-left-radius</li> 243 <li>-moz-border-radius-bottomright / -webkit-border-bottom-right-radius /border-bottom-right-radius</li> 244 </ul> 245 <h3>border-radius(圆角)还有其他一些用法，Firefox、webkit内核的Safari和Chrome和opera（css3）其他写法有些略微的差异，具体可以查看以下网址： </h3> 246 <p> 247 <a href="https://developer.mozilla.org/en/CSS:-moz-border-radius" target="_blank">https://developer.mozilla.org/en/CSS:-moz-border-radius</a> 248 </p> 249 <p> 250 <a href="http://www.the-art-of-web.com/css/border-radius/" target="_blank">http://www.the-art-of-web.com/css/border-radius/</a> 251 </p> 252 <p> 253 <a href="http://dancewithnet.com/2008/12/27/border-radius-and-rounded-corner/" target="_blank">http://dancewithnet.com/2008/12/27/border-radius-and-rounded-corner/</a> 254 </p> 255 </div> 256 257 258 </body> 259 </html>
欢迎大家补充，不足之处，请大家不吝指点，小女子在此有礼了~
