CSS圓角框進行JS封裝

http://www.inspirr.com

---

文章導航： 第一章：基本的圓角框 第二章：透明圓角化背景圖片 第三章：圓角化圖片 第四章：CSS圓角框組件 V1.0 前序：本來前三篇文章已經將CSS圓角框講解完畢，但從網友反饋中，都說到不好使用，因此有了這篇文章，本文主要是將前面的結果總結修訂后進行JS封裝，方便調用。
在本次封裝中，增加了對真正img標簽引用的圖片實現圓角化，之前的圓角圖片大多是基于背景圖片的，因為純css無法實現img圖片的圓角，有了js的加入，就變成可能了。并且在這次封裝過程中修正了上次的背景圖片下面兩個圓角圖片的定位錯誤問題。
其實這個控件的JS代碼很簡單，只需要用到innerHTML就可以完成其大部分工作，而真正的難點在于對于CSS樣式的合并組合使用。
先看看最終效果截圖：
在我的《CSS圓角框組件V1.0》中，可以變化出6種基本風格的圓角框（至于顏色風格，則可以說是千變萬化了）。它們分別是：

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

  Tag: 設計公司 | 網頁設計公司 | 廣告公司 | 網站設計 | 平面設計 | 互動媒體 | 網頁設計 | Web design | Website design | design house | 媒體公司 | Iphone app | 程式設計 | Flash 網頁 | Flash game | 動畫設計 | 後期製作 | 網上商店 | 網上宣傳 | 網頁服務 |