武林網(wǎng)(www.survivalescaperooms.com)文章簡介：本來前三篇文章已經(jīng)將CSS圓角框講解完畢，但從網(wǎng)友反饋中，都說到不好使用，因此有了這篇文章，本文主要是將前面的結(jié)果總結(jié)修訂后進行JS封裝，方便調(diào)用。

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

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

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

先看看最終效果截圖：

圖一

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