在本次封裝中，增加了對真正img標籤引用的實現圓角化，之前的圓角大多是基於背景的，因為純css無法實現img的圓角，有了js的加入，就變成可能了。並且在這次封裝過程中修正了上次的背景下面兩個圓角的定位錯誤問題。
其實這個控制項的js**很簡單，只需要用到innerhtml就可以完成其大部分工作，而真正的難點在於對於css樣式的合併組合使用。
先看看最終效果截圖：
圖一在我的《css圓角框元件v1.0》中，可以變化出6種基本風格的圓角框（至於顏色風格，則可以說是千變萬化了）。它們分別是：
js**就不用詳解了，都很簡單，我在js中作了詳細的注釋說明，一看就會。下面說說這6種風格的呼叫方法：
第一種：純線框圓角
這是最基本，也是應用最廣泛的一種應用。只需一句話就可以了。
js行為：
複製**
**如下:
b_roundcurve("botto程式設計客棧m","#f8b3d0","#fff5fa",1);//普通圓角框
解釋：四個引數，分別代表樣式名稱、邊框色值、背景色值、風格引數。
html結構：
複製**
**如下:
第二種：標題線框圓角
一般這種塊狀布局，都需要在頁頭加入標題，你可以使用h1~h6系列標籤。
js行為：
複製**
**如下:
b_roundcurve("right2","orange","",3,"h3");//標題和內容區都透明
解釋：五個引數，分別代表樣式名稱、邊框色值、背景色值、風格引數、標題標籤名稱，因為考慮了擴充套件性，當想使用其它的標籤時，可以隨時替換，如h1~h6系列標籤。
html結構：
複製**
**如下:
內容 第三種：標題和內容區可分別自定義顏色圓角
與第二種風格差不多，差別在於可以分別定義標題和內容區的顏色值。
js行為：
複製**
**如下:
b_roundcurve("right1","#863313","#84d4ca",3,"h3","#bab556");//標題只用純色背景
解釋：六個引數，分別代程式設計客棧表樣式名稱、邊框色值、背景色值、風格引數、標題標籤名稱、標題背景色值。
html結構：
複製**
**如下:
內容 第四種：標題背景圓角
這種需要將標題的背景路徑作為引數傳入，有了背景，一般都不需要背景顏色了，所以將第六個引數值設為空：
js行為：
複製**
**如下:
b_roundcurve("right3","#a0c044","#e9f2cc",3,"h3","","image/bg1.gif");//標題用背景
解釋：七個引數，分別代表樣式名稱、邊框色值、背景色值、風格引數、標題標籤名稱、標題背景色值、標題背景路徑。
html結構：
複製**
**如下:
內容 第五種：裝飾性背景圓角
這種圓角也是用得比較多的，這種風格要注意：在css中需要設定容器的寬高值，因為在js中會查詢到這個的寬高值。
js行為：
複製**
**如下:
b_roundcurve("rightbgimg","#f38e1a","",4);//圓角背景
解釋：四個引數，分別代表樣式名稱、邊框色值、背景色值、風格引數。背景色值和背景只選其一，所以將第三個引數置為空。
html結構：
複製**
**如下:
第六種：img圓角
純css方法是無法做到img圓角的，但有js的加入，就可以變相實現。原理和第五種相似，只是將這個img的路徑取出來，在js中以背景的方式加入到各個容器中去，然後再還原img標籤。
js行為：
複製**
**如下:
b_roundcurve("img","#999","#fff5fa",2);//圓角img
解釋：四個引數，分別代表樣式名稱、邊框色值、背景色值、風格引數。
html結構：
最簡潔的html結構，無冗餘**。
複製**
**如下:
元件優點：
全面相容所有瀏覽器。
圓角不需要，直接**生成，省去製圖的麻煩。
自適應外框的大小，可廣泛應用於布局區塊中。
封裝難以控制的css**，呼叫靈活方便。
封裝html結構，你只需定義你想要的結構，無冗餘，更語義化。
元件缺點：
不能定義線框的大小。如果你需要改變線框大小，本元件不適合你。
圓角不夠圓滑，如果你對圓角的精度要求較高，不宜採用本元件。
線框顏色和背景色不宜採用對比太強烈的顏色，容易看出鋸齒。
本模型在以下瀏覽器中完美通過：
ie5.5、ie6、ie7、ie8、ff3、tt、maxthon2.1.5、opera9.6、safari4.0、chrome2.0。
點選這兒**完整的壓縮包：**demo
本文標題: css 圓角框進行js封裝版
本文位址: /web/css/29164.html
CSS圓角框元件 V1 0
原創 冰極峰 第一章 基本的圓角框 第二章 透明圓角化背景 第三章 圓角化 第四章 css圓角框元件 v1.0 前序 本來前三篇文章已經將css圓角框講解完畢，但從反饋中，都說到不好使用，因此有了這篇文章，本文主要是將前面的結果總結修訂後進行js封裝，方便呼叫。在本次封裝中，增加了對真正img標籤引...
7種CSS圓角框解決方案
無純css圓角框 收錄理由 相容性強，不用圖形 圖一特點 1.不用任何圖形，使用很多個div容器模擬出圓角效果。2.相容性 通殺所有瀏覽器 缺點 1.構造這個圓角需要加入太多的無語義的標籤，結構比較冗餘。2.重用性不強 如果乙個頁面有多個圓角，並且要實現不同的半徑大小，則其靈活性不夠。3.邊框顏色雖...
7種CSS圓角框解決方案
圓角框，因為其樣式比直角框漂亮，所以成為設計師心中偏愛的設計元素。現在的web標準下大量的網頁 部落格都採用圓角框設計，成為一道亮麗的風景線。然而，就是這個圓角，卻成為了網頁前端人員心中永遠抹之不去的陰影，對它，可以說是又痛又愛。愛的是它的漂亮，痛的是要讓它相容通行於各種不同的瀏覽器卻成為乙個永遠的...