兼容性極好的圓角邊框
1、層級組建圓角 html
這是在網上看到比較好的兼容性的圓角邊框，詳見" 圓角邊框 "。瀏覽器
如今要弄圓角邊框，通常都是直接用border_radius，可是咱們都很清楚這是CSS3的屬性，兼容性不是那麼完善，在ie8以及ie8如下的瀏覽器都是無效的，呈現出來的都是直角。app
因此不少時候若是要作到兼容，不少時候會採用「滑動門」技術。url
不過根據上面我收藏的代碼可能會稍微多點，但也不失爲一種純CSS的圓角邊框的方法。spa
而下面是我即將要改造到項目當中的，詳見" 項目中的圓角邊框 」。設計
2、CSS sprite 圓角3d
圓角矩形樣式的設計原理源於九宮格技術，在一個3*3的表格中，左上、右上、右下、左下分別放入4個圓角圖案，內容放置在中間的方格中，其上下左右4個方向的方格可分別放入用於拉伸的圖案，最終造成了一種可任意變化大小的圓角方框。code
原理如上所述，效果：CSS sprite圓角 ，源代碼htm
轉自：http://hi.baidu.com/ipqyygysai/item/9d4cd40f989244c22f4c6b6dblog
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不做討論.
滑動門適用範圍很廣, 以致於隨處可見.