讓我們來(lái)回顧一下目前網(wǎng)站建設(shè)中都有哪些解決方案。
前幾種:無(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)模擬出圓角框的輪廓線。
網(wǎng)站設(shè)計(jì)之超圓滑圓角框的半**解決方案,謝謝圍觀。