圓角框，由于其樣式比直角框美麗，所以成為網(wǎng)頁設(shè)計(jì)師心中偏愛的設(shè)計(jì)元素。現(xiàn)在的web尺度下大批的網(wǎng)頁、博客都采用圓角框設(shè)計(jì)，成為一道亮麗的風(fēng)景線。然而，就是這個(gè)圓角，卻成為了網(wǎng)頁前端職員心中永遠(yuǎn)抹之不往的暗影，對(duì)它，可以說是又痛又愛。愛的是它的美麗，痛的是要讓它兼容通行于各種不同的瀏覽器卻成為一個(gè)永遠(yuǎn)的神話。

　　讓我們往返顧一下目前網(wǎng)站建設(shè)中都有哪些解決計(jì)劃。

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

　　收錄理由：兼容性強(qiáng)，不用圖形

圖一　

　　特點(diǎn)：
　　1. 不用任何圖形，應(yīng)用很多個(gè)div容器模仿出圓角后果。
　　2. 兼容性：通殺所有瀏覽器。

　　毛病：
　　1. 結(jié)構(gòu)這個(gè)圓角需要參加太多的無語義的標(biāo)簽，結(jié)構(gòu)比擬冗余。
　　2. 重用性不強(qiáng)：假如一個(gè)頁面有多個(gè)圓角，并且要實(shí)現(xiàn)不同的半徑大小，則其機(jī)動(dòng)性不夠。
　　3. 邊框色彩固然可以調(diào)節(jié)，但會(huì)對(duì)頁面中的結(jié)構(gòu)產(chǎn)生致命的影響，實(shí)用于色彩單一并且一個(gè)頁面中圓角利用未幾的頁面。
　　4. 不輕易實(shí)現(xiàn)圓弧內(nèi)有漸變色的圖形背景。
　　5. 圓角框不夠圓滑，有鋸齒現(xiàn)象，合適于背風(fēng)景和當(dāng)前色色差不大并且圓弧較小的網(wǎng)頁。
　　實(shí)現(xiàn)原理：
　　用很多1像素高的div容器，利用背風(fēng)景和邊框色來模仿出圓角框的輪廓線。