|
導(dǎo)言：
本文探討的是圓角框的終極解決方案，其核心關(guān)鍵詞是“圓滑、完美、兼容、重用性、語(yǔ)義”，這些技術(shù)都是收集目前網(wǎng)絡(luò)上最流行的做法�？v觀種種方法，各有其優(yōu)勢(shì)，請(qǐng)針對(duì)不同的環(huán)境分別使用。
圓角框，因?yàn)槠錁邮奖戎苯强蚱�，所以成為設(shè)計(jì)師心中偏愛的設(shè)計(jì)元素�，F(xiàn)在的web標(biāo)準(zhǔn)下大量的網(wǎng)頁(yè)、博客都采用圓角框設(shè)計(jì)，成為一道亮麗的風(fēng)景線。
然而，就是這個(gè)圓角，卻成為了網(wǎng)頁(yè)前端人員心中永遠(yuǎn)抹之不去的陰影，對(duì)它，可以說(shuō)是又痛又愛。愛的是它的漂亮，痛的是要讓它兼容通行于各種不同的瀏覽器卻成為一個(gè)永遠(yuǎn)的神話。
讓我們來(lái)回顧一下目前網(wǎng)絡(luò)流行的都有哪些解決方案。
第一種：無(wú)圖片純css圓角框
收錄理由：兼容性強(qiáng)，不用圖形
圖一
特點(diǎn)：
- 不用任何圖形，使用很多個(gè)div容器模擬出圓角效果。
- 兼容性：通殺所有瀏覽器
缺點(diǎn)：
- 構(gòu)造這個(gè)圓角需要加入太多的無(wú)語(yǔ)義的標(biāo)簽，結(jié)構(gòu)比較冗余。
- 重用性不強(qiáng)：如果一個(gè)頁(yè)面有多個(gè)圓角，并且要實(shí)現(xiàn)不同的半徑大小，則其靈活性不夠。
- 邊框顏色雖然可以調(diào)節(jié)，但會(huì)對(duì)頁(yè)面中的結(jié)構(gòu)產(chǎn)生致命的影響，適用于色彩單一并且一個(gè)頁(yè)面中圓角應(yīng)用不多的頁(yè)面。
- 不容易實(shí)現(xiàn)圓弧內(nèi)有漸變色的圖形背景。
- 圓角框不夠圓滑，有鋸齒現(xiàn)象，適合于背景色和當(dāng)前色色差不大并且圓弧較小的網(wǎng)頁(yè)。
實(shí)現(xiàn)原理：
用很多1像素高的div容器，利用背景色和邊框色來(lái)模擬出圓角框的輪廓線。
實(shí)例演示： http://www.cssplay.co.uk/boxes/snazzy.html
第二種：無(wú)圖片純css圓角框，用特殊字符（&bull）
收錄理由：圓滑，不用圖形
圖二
特點(diǎn)：
- 不用任何圖形，使用特殊字符•（圓點(diǎn)）模擬出圓角。
- 兼容性：通殺所有瀏覽器
- 圓角平滑
缺點(diǎn)：
- 構(gòu)造這個(gè)圓角一樣需要加入無(wú)語(yǔ)義的標(biāo)簽，結(jié)構(gòu)冗余，同第一種一樣。
- 重用性不強(qiáng)：如果一個(gè)頁(yè)面有多個(gè)圓角，并且要實(shí)現(xiàn)不同的半徑大小，需要調(diào)整四個(gè)角圖片的定位，并且字符大小對(duì)其有影響，靈活性不夠。
- 顏色雖可調(diào)節(jié)，但要求里面的背景色和字符的顏色相同，不能做成邊框線條。適用于色彩單一并且一個(gè)頁(yè)面中圓角不是太多的頁(yè)面。
- 一樣不容易實(shí)現(xiàn)圓弧內(nèi)有漸變色的圖形背景。
實(shí)現(xiàn)原理：
用特殊字符（&bull），利用定位，截取四分之一圓模擬出圓角框的一個(gè)角圖片。
實(shí)例演示：http://www.cssplay.co.uk/boxes/curves.html
出處：藍(lán)色理想
責(zé)任編輯：bluehearts
上一頁(yè) 下一頁(yè) 超圓滑圓角框的半完美解決方案 [2]
◎進(jìn)入論壇網(wǎng)頁(yè)制作、WEB標(biāo)準(zhǔn)化版塊參加討論，我還想發(fā)表評(píng)論。
|
第 1 頁(yè) 超圓滑圓角框的半完美解決方案 [1]
第 2 頁(yè) 
