前序：本來前三篇文章已經將CSS圓角框講解完畢，但從網友反饋中，都說到不好使用，因此有了這篇文章，本文主要是將前面的結果總結修訂后進行JS封裝，方便調用。

在本次封裝中，增加了對真正img標簽引用的圖片實現圓角化，之前的圓角圖片大多是基于背景圖片的，因為純css無法實現img圖片的圓角，有了js的加入，就變成可能了。并且在這次封裝過程中修正了上次的背景圖片下面兩個圓角圖片的定位錯誤問題。

其實這個控件的JS代碼很簡單，只需要用到innerHTML就可以完成其大部分工作，而真正的難點在于對于CSS樣式的合并組合使用。

先看看最終效果截圖：

圖一

在我的《CSS圓角框組件V1.0》中，可以變化出6種基本風格的圓角框（至于顏色風格，則可以說是千變萬化了）。它們分別是：

1. 純線框圓角。
2. 標題線框圓角。不帶背景色或背景圖片，透明。
3. 標題和內容區可分別自定義顏色圓角。
4. 標題背景圖片圓角。標題帶背景圖片時，自動實現圓角。
5. 裝飾性背景圖片圓角。容器有裝飾性背景圖片時，自動實現圓角。
6. Img圖片圓角。如果有img標簽引用圖片時，自動實現圓角。

發表評論 共有條評論 用戶名: 密碼: 驗證碼: 匿名發表