使用 CSS+Jquery 實(shí)現(xiàn)頁(yè)面圓角框效果

１，無(wú)圖片純css圓角框

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

圖一

特點(diǎn)：

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

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

缺點(diǎn)：

1.構(gòu)造這個(gè)圓角需要加入太多的無(wú)語(yǔ)義的標(biāo)簽，結(jié)構(gòu)比較冗余。

2.重用性不強(qiáng)：如果一個(gè)頁(yè)面有多個(gè)圓角，并且要實(shí)現(xiàn)不同的半徑大小，則其靈活性不夠。

3.邊框顏色雖然可以調(diào)節(jié)，但會(huì)對(duì)頁(yè)面中的結(jié)構(gòu)產(chǎn)生致命的影響，適用于色彩單一并且一個(gè)頁(yè)面中圓角應(yīng)用不多的頁(yè)面。

4.不容易實(shí)現(xiàn)圓弧內(nèi)有漸變色的圖形背景。

5.圓角框不夠圓滑，有鋸齒現(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)：

1.不用任何圖形，使用特殊字符•（圓點(diǎn)）模擬出圓角。

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

3.圓角平滑

缺點(diǎn)：

1.構(gòu)造這個(gè)圓角一樣需要加入無(wú)語(yǔ)義的標(biāo)簽，結(jié)構(gòu)冗余，同第一種一樣。

2.重用性不強(qiáng)：如果一個(gè)頁(yè)面有多個(gè)圓角，并且要實(shí)現(xiàn)不同的半徑大小，需要調(diào)整四個(gè)角圖片的定位，并且字符大小對(duì)其有影響，靈活性不夠。

3.顏色雖可調(diào)節(jié)，但要求里面的背景色和字符的顏色相同，不能做成邊框線條。適用于色彩單一并且一個(gè)頁(yè)面中圓角不是太多的頁(yè)面。

4.一樣不容易實(shí)現(xiàn)圓弧內(nèi)有漸變色的圖形背景。

實(shí)現(xiàn)原理：

用特殊字符（&bull），利用定位，截取四分之一圓模擬出圓角框的一個(gè)角圖片。

實(shí)例演示：http://www.cssplay.co.uk/boxes/curves.html

生活不易，碼農(nóng)辛苦
如果您覺(jué)得本網(wǎng)站對(duì)您的學(xué)習(xí)有所幫助,可以手機(jī)掃描二維碼進(jìn)行捐贈(zèng)