|
序言：在我的文章《超圓滑圓角框的半完美解決方案》中已經(jīng)總結(jié)了七種不同的圓角框解決方案，基本上總結(jié)完了目前網(wǎng)絡上比較流行的圓角框?qū)崿F(xiàn)方案。而在我的另一篇文章《無圖片山頂角》中又是一個另類的實現(xiàn)方法。
純CSS實現(xiàn)圓角框是一件大家都說爛了的事件，我也寫過兩篇總結(jié)文章，為什么還會有這篇文章呢，事情是這樣的。在我們的以前的項目中，實現(xiàn)圓角框往往是用背景圖片來實現(xiàn)的，但是，當這些項目發(fā)布上線后，在維護過程中，有時需要添加一些新的需求，因為以前的項目中大量采用了圓角圖片，并且這些圖片全部采用了CSS sprites方式合并的圖，為了不增加更多的額外工作，并且也不想用JS來添加更多的http請求，所以需要一些簡單的CSS方案來解決這個問題。而我的個人愛好，也喜歡采用無圖片的方式來處理這些效果�？傆X得CSS能完成的工作，為什么不讓它來實現(xiàn)呢？
實現(xiàn)原理：
純CSS方式實現(xiàn)圓角框的原理在網(wǎng)絡上已經(jīng)有很多人詳細解說了，下面這個示意圖是我將其中的一個圓角進行放大后的效果。
圖一
從上面效果圖中我們可以看到其實這種圓角框是靠一個個容器堆砌而成的，每一個容器的寬度不同，這個寬度是由margin外邊距來實現(xiàn)的，如：margin:0 5px;就是左右兩側(cè)的外邊距5像素，從上到下有5條線，其外邊距分別為5px，3px，2px，1px，依次遞減。因此根據(jù)這個原理我們可以實現(xiàn)簡單的html結(jié)構(gòu)和樣式。
1、Html結(jié)構(gòu)層：
<div class="sharp color1">
<b class="b1"></b><b class="b2"></b><b class="b3"></b><b class="b4"></b>
<div class="content">文字內(nèi)容</div>
</div>
<b class="b5"></b><b class="b6"></b><b class="b7"></b><b class="b8"></b>
</div>
b1~b4構(gòu)成上面的左右兩個圓角結(jié)構(gòu)體，而b5~b8則構(gòu)建了下面左右兩個圓角結(jié)構(gòu)體。而content則是內(nèi)容主體，將這些全部放在一個大的容器中，并給它的一個類名sharp，用來設置通用的樣式。再給它疊加了一個color1類名，這個類名用來區(qū)別不同的顏色方案，因為可能會有不同顏色的圓角框。
出處：藍色理想
責任編輯：bluehearts
上一頁 下一頁 CSS圓角——基本的圓角框 [2]
◎進入論壇網(wǎng)頁制作、WEB標準化版塊參加討論，我還想發(fā)表評論。
|
第 1 頁 CSS圓角——基本的圓角框 [1]
第 2 頁 
