兼容性極好的圓角邊框

1、層級組建圓角 

　　這是在網上看到比較好的兼容性的圓角邊框，詳見" 圓角邊框 "。

　　如今要弄圓角邊框，通常都是直接用border_radius，可是咱們都很清楚這是CSS3的屬性，兼容性不是那麼完善，在ie8以及ie8如下的瀏覽器都是無效的，呈現出來的都是直角。

　　因此不少時候若是要作到兼容，不少時候會採用「滑動門」技術。

　　不過根據上面我收藏的代碼可能會稍微多點，但也不失爲一種純CSS的圓角邊框的方法。

　　而下面是我即將要改造到項目當中的，詳見" 項目中的圓角邊框 」。

 

2、CSS sprite 圓角

　　圓角矩形樣式的設計原理源於九宮格技術，在一個3*3的表格中，左上、右上、右下、左下分別放入4個圓角圖案，內容放置在中間的方格中，其上下左右4個方向的方格可分別放入用於拉伸的圖案，最終造成了一種可任意變化大小的圓角方框。

 

　　原理如上所述，效果：CSS sprite圓角 ，源代碼

轉自：http://hi.baidu.com/ipqyygysai/item/9d4cd40f989244c22f4c6b6d

 

 3、固定寬度的純色圓角矩形

在衆多圓角技術中, 固定寬度的圓角矩形應該是最容易實現的, 只須要2個圖片以及一段簡單的html代碼. 

<div class="wrapper">
    <h1>標題</h1>
    <p>內容</p>
</div> 

 

.wrapper{width:181px;background:#8cc355 url(../images/bottom.gif) no-repeat left bottom;}
.wrapper h1{padding:10px 20px 0 20px;background:url(../images/top.gif) no-repeat left top;}
.wrapper p{padding:0 20px 10px 20px;} 

 

所須要的圖片：

　　　　　　　　   

　　      　　　　　　　　top.gif                              bottom.gif

效果圖以下：

　　　　　　　　

這種方法適用於寬度固定, 高度自適應的純色圓角矩形. 

 

4、固定寬度的非純色圓角矩形

這個方法是上一個方法的延伸, 此次咱們不在容器上定義背景色, 而是定義重複的背景圖片. 

<div class="wrapper">
    <h1>標題</h1>
    <p>內容</p>
</div> 

.wrapper{width:183px;background:url(../images/tile.gif) repeat-y center;}
.wrapper h1{padding:20px 20px 0 20px;background:url(../images/top.gif) no-repeat left top;}
.wrapper p{padding:0 20px 20px 20px;background:url(../images/bottom.gif) no-repeat left bottom;} 

所需圖片以下：

　　　　              

　　　　　　　　top.gif                                    bottom.gif                          tile.gif

效果圖：

　　　　

 

五. 滑動門技術(Sliding Doors)

前面的兩種圓角矩形都是固定寬度的,只能在垂直方向上自適應增加(或水平方向上), 若是須要同時在垂直方向與水平方向上自適應增加尺寸的話, 很顯然前兩種方法不適用. 這時咱們就能夠採用所謂的滑動門技術.

原理: 

Top-Left.gif 與 Bottom-Left.gif 都是大圖像, Top-Right.gif 和 Bottom-Right.gif 都是小圖像, 小圖像在大圖像上根據尺寸進行自動滑動以適應內容. 
該方法用到2組4個圖片: 1組Top圖片構成頂部圓角, 1組Bottom圖片構成底部圓角以及主體. 注意容器的最大高度和寬度不能超過圖片的最大高度和寬度. 

圖片的結構位置: 

html代碼大體以下: 

<div class="wrapper">
    <div class="box-outer">
        <div class="box-inner">
            <h1>標題</h1>
            <p>內容</p>
        </div>
    </div>
</div>

CSS代碼大體以下: 

.wrapper{width:20em;background:#ccc url(../images/bottom-left.gif) no-repeat left bottom;}
.box-outer{background:url(../images/bottom-right.gif) no-repeat right bottom;}
.box-inner{background:url(../images/top-left.gif) no-repeat left top;}
.wrapper h1{padding:2%;background:url(../images/top-right.gif) no-repeat right top;}
.wrapper p{padding:2%;} 

Tips: 
該方法很好的解決了容器擴展的問題, 可是要注意容器的最大尺寸不要超過背景圖片所能構成的最大尺寸; 
該方法須要2組額外的沒有任何語義的標籤, 在結構上並不理想, 咱們能夠用JavaScript和DOM動態添加額外元素來避免這個問題, JavaScript不做討論. 
滑動門適用範圍很廣, 以致於隨處可見. 

轉自：http://www.missyuan.com/thread-288784-1-1.html