border-radius瀏覽器相容性： IE9+、Firefox 4+、Chrome、Safari 5+ 以及 Opera 支持 border-radius 屬性。 <style>.box { position:relative; width: 99px; height: 99px; paddin
border-radius瀏覽器相容性：
IE9+、Firefox 4+、Chrome、Safari 5+ 以及 Opera 支持 border-radius 屬性。
我們都知道可以border-radius來給元素添加圓角； 但是不僅ie6，ie7不支持這個，連ie8也是不支持這個屬性的。 如何讓其它的瀏覽器也支持圓角呢？ 今天我分享一下我的做法：
原理很簡單就是將四個角切下來，用絕對定位的方式分別遮住四個方角以達到圓角的效果。
註意：這裡的圓角需要同時將背景（也就是黃色部分）的部分切下來，不然會出現左下角的那種方角沒有被遮住的情況。
這是代碼:
<style>
.box {
position:relative;
width: 99px;
height: 99px;
padding:9px;
border: 1px solid #F00;
background-color: #FFF;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius:10px;
}
/*以下是不支持border-radius的瀏覽器所需要的代碼*/
.r1, .r2, .r3, .r4 {
position: absolute;
height: 10px;
width: 10px;
background-image: url(img/r.png);
background-repeat: no-repeat;
overflow:hidden;
}
.r1{ top:-1px; left:-1px; background-position:0 0;}
.r2{ top:-1px; right:-1px; background-position:-10px 0;}
.r3{ bottom:-1px; left:-1px; background-position:0 -10px;}
.r4{ bottom:-1px; right:-1px; background-position:-10px -10px;}
</style>
css
1 <style>
2 .box {
3 position:relative;
4 width: 99px;
5 height: 99px;
6 padding:9px;
7 border: 1px solid #F00;
8 background-color: #FFF;
9 -webkit-border-radius: 10px;
10 -moz-border-radius: 10px;
11 border-radius:10px;
12 }
13 /*以下是不支持border-radius的瀏覽器所需要的代碼*/
14 .r1, .r2, .r3, .r4 {
15 position: absolute;
16 height: 10px;
17 width: 10px;
18 background-image: url(img/r.png);
19 background-repeat: no-repeat;
20 overflow:hidden;
21 }
22 .r1{ top:-1px; left:-1px; background-position:0 0;}
23 .r2{ top:-1px; right:-1px; background-position:-10px 0;}
24 .r3{ bottom:-1px; left:-1px; background-position:0 -10px;}
25 .r4{ bottom:-1px; right:-1px; background-position:-10px -10px;}
26 </style>
1 <div class="box"><i class="r1"></i><i class="r2"></i><i class="r3"></i><i class="r4"></i> 2 <!--這裡是其它的內容--> 3 </div>
這是由於ie6在絕對定位的時候如果父級容器的高或者寬是單數,就會在right和bottom上有1像素的bug！（這個高度和寬度是innerwidth和innerheight）
如果是雙數則不會出現這個問題;
這個Bug得採用js來解決,這裡我就不仔細講了，具體請看demo;
優點： 1.不限制元素的大小; 2.採用絕對定位，不會影響佈局; 3.漸進增強，對於支持border-radius的瀏覽器我們可以隱藏這四個角上的元素。 4.相容IE6; 缺點: 1.html裡面需要額外添加四個多餘的元素; 2.css也需要添加定位的樣式; 3.還需要添加一個額外的圖片; 4.如果需要相容ie6還得有可能還得採用Js;
