武林網(wǎng)(www.survivalescaperooms.com)文章簡介：本文探討的是圓角框的終極解決方案，其核心關(guān)鍵詞是“圓滑、完美、兼容、重用性、語義”，這些技術(shù)都是收集目前網(wǎng)絡(luò)上最流行的做法。縱觀種種方法，各有其優(yōu)勢，請針對不同的環(huán)境分別使用。

導言：

本文探討的是圓角框的終極解決方案，其核心關(guān)鍵詞是“圓滑、完美、兼容、重用性、語義”，這些技術(shù)都是收集目前網(wǎng)絡(luò)上最流行的做法。縱觀種種方法，各有其優(yōu)勢，請針對不同的環(huán)境分別使用。

圓角框，因為其樣式比直角框漂亮，所以成為設(shè)計師心中偏愛的設(shè)計元素。現(xiàn)在的web標準下大量的網(wǎng)頁、博客都采用圓角框設(shè)計，成為一道亮麗的風景線。
然而，就是這個圓角，卻成為了網(wǎng)頁前端人員心中永遠抹之不去的陰影，對它，可以說是又痛又愛。愛的是它的漂亮，痛的是要讓它兼容通行于各種不同的瀏覽器卻成為一個永遠的神話。
讓我們來回顧一下目前網(wǎng)絡(luò)流行的都有哪些解決方案。

第一種：無圖片純css圓角框

收錄理由：兼容性強，不用圖形

圖一

特點：

缺點：

實現(xiàn)原理：
用很多1像素高的div容器，利用背景色和邊框色來模擬出圓角框的輪廓線。

實例演示：

第二種：無圖片純css圓角框，用特殊字符（&bull）

收錄理由：圓滑，不用圖形

圖二

特點：

缺點：

實現(xiàn)原理：
用特殊字符（&bull），利用定位，截取四分之一圓模擬出圓角框的一個角圖片。

實例演示：