CSS實現(xiàn)絕對的完美圓角框

2024-07-11 08:44:25

字體：大中小

供稿：網(wǎng)友

本文探討的是圓角框的終極解決方案，其核心關鍵詞是“圓滑、完美、兼容、重用性、語義”，這些技術(shù)都是收集目前網(wǎng)絡上最流行的做法。縱觀種種方法，各有其優(yōu)勢，請針對不同的環(huán)境分別使用。
導言：
本文探討的是圓角框的終極解決方案，其核心關鍵詞是“圓滑、完美、兼容、重用性、語義”，這些技術(shù)都是收集目前網(wǎng)絡上最流行的做法。縱觀種種方法，各有其優(yōu)勢，請針對不同的環(huán)境分別使用。
圓角框，因為其樣式比直角框漂亮，所以成為設計師心中偏愛的設計元素。現(xiàn)在的web標準下大量的網(wǎng)頁、博客都采用圓角框設計，成為一道亮麗的風景線。
然而，就是這個圓角，卻成為了網(wǎng)頁前端人員心中永遠抹之不去的陰影，對它，可以說是又痛又愛。愛的是它的漂亮，痛的是要讓它兼容通行于各種不同的瀏覽器卻成為一個永遠的神話。
讓我們來回顧一下目前網(wǎng)絡流行的都有哪些解決方案。
第一種：無圖片純css圓角框
收錄理由：兼容性強，不用圖形

圖一
特點：

不用任何圖形，使用很多個div容器模擬出圓角效果。兼容性：通殺所有瀏覽器
缺點：

實現(xiàn)原理：
用很多1像素高的div容器，利用背景色和邊框色來模擬出圓角框的輪廓線。
實例演示： http://www.cssplay.co.uk/boxes/snazzy.html
第二種：無圖片純css圓角框，用特殊字符（&bull）
收錄理由：圓滑，不用圖形

圖二
特點：

不用任何圖形，使用特殊字符•（圓點）模擬出圓角。兼容性：通殺所有瀏覽器圓角平滑
缺點：

構(gòu)造這個圓角一樣需要加入無語義的標簽，結(jié)構(gòu)冗余，同第一種一樣。重用性不強：如果一個頁面有多個圓角，并且要實現(xiàn)不同的半徑大小，需要調(diào)整四個角圖片的定位，并且字符大小對其有影響，靈活性不夠。顏色雖可調(diào)節(jié)，但要求里面的背景色和字符的顏色相同，不能做成邊框線條。適用于色彩單一并且一個頁面中圓角不是太多的頁面。一樣不容易實現(xiàn)圓弧內(nèi)有漸變色的圖形背景。
實現(xiàn)原理：
用特殊字符（&bull），利用定位，截取四分之一圓模擬出圓角框的一個角圖片。
實例演示：http://www.cssplay.co.uk/boxes/curves.html

上一篇：WebKit中可用的CSS高級特性

下一篇：CSS實例：用CSS制作網(wǎng)頁像素畫