---

本文探討的是前端設計種最常用的頁面圓角框效果的７種不同方法實現解決方案，其核心關鍵詞是“圓滑、完美、兼容、重用性、語義”，這些技術都是收集目前網絡上最流行的做法。縱觀種種方法，各有其優勢，請針對不同的環境分別使用。

圓角框，因為其樣式比直角框漂亮，所以成為設計師心中偏愛的設計元素。現在的web標準下大量的網頁、博客都采用圓角框設計，成為一道亮麗的風景線。

然而，就是這個圓角，卻成為了網頁前端人員心中永遠抹之不去的陰影，對它，可以說是又痛又愛。愛的是它的漂亮，痛的是要讓它兼容通行于各種不同的瀏覽器卻成為一個永遠的神話。

讓我們來回顧一下目前網絡流行的都有哪些解決方案。

１，無圖片純css圓角框

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

圖一

特點：

1.不用任何圖形，使用很多個div容器模擬出圓角效果。

2.兼容性：通殺所有瀏覽器

缺點：

1.構造這個圓角需要加入太多的無語義的標簽，結構比較冗余。

2.重用性不強：如果一個頁面有多個圓角，并且要實現不同的半徑大小，則其靈活性不夠。

3.邊框顏色雖然可以調節，但會對頁面中的結構產生致命的影響，適用于色彩單一并且一個頁面中圓角應用不多的頁面。

4.不容易實現圓弧內有漸變色的圖形背景。

5.圓角框不夠圓滑，有鋸齒現象，適合于背景色和當前色色差不大并且圓弧較小的網頁。

實現原理：

用很多1像素高的div容器，利用背景色和邊框色來模擬出圓角框的輪廓線。

實例演示： http://www.cssplay.co.uk/boxes/snazzy.html