|
文章導(dǎo)航：
前序：本來(lái)前三篇文章已經(jīng)將CSS圓角框講解完畢，但從網(wǎng)友反饋中，都說(shuō)到不好使用，因此有了這篇文章，本文主要是將前面的結(jié)果總結(jié)修訂后進(jìn)行JS封裝，方便調(diào)用。
在本次封裝中，增加了對(duì)真正img標(biāo)簽引用的圖片實(shí)現(xiàn)圓角化，之前的圓角圖片大多是基于背景圖片的，因?yàn)榧僣ss無(wú)法實(shí)現(xiàn)img圖片的圓角，有了js的加入，就變成可能了。并且在這次封裝過(guò)程中修正了上次的背景圖片下面兩個(gè)圓角圖片的定位錯(cuò)誤問(wèn)題。
其實(shí)這個(gè)控件的JS代碼很簡(jiǎn)單，只需要用到innerHTML就可以完成其大部分工作，而真正的難點(diǎn)在于對(duì)于CSS樣式的合并組合使用。
先看看最終效果截圖：
圖一
在我的《CSS圓角框組件V1.0》中，可以變化出6種基本風(fēng)格的圓角框（至于顏色風(fēng)格，則可以說(shuō)是千變?nèi)f化了）。它們分別是：
- 純線框圓角。
- 標(biāo)題線框圓角。不帶背景色或背景圖片，透明。
- 標(biāo)題和內(nèi)容區(qū)可分別自定義顏色圓角。
- 標(biāo)題背景圖片圓角。標(biāo)題帶背景圖片時(shí)，自動(dòng)實(shí)現(xiàn)圓角。
- 裝飾性背景圖片圓角。容器有裝飾性背景圖片時(shí)，自動(dòng)實(shí)現(xiàn)圓角。
- Img圖片圓角。如果有img標(biāo)簽引用圖片時(shí)，自動(dòng)實(shí)現(xiàn)圓角。
出處：藍(lán)色理想
責(zé)任編輯：bluehearts
上一頁(yè) 下一頁(yè) CSS圓角框組件 V1.0 [2]
|
第 1 頁(yè) CSS圓角框組件 V1.0 [1]
第 2 頁(yè) 
