圓角是現(xiàn)代網(wǎng)頁設(shè)計中常見的一個特性。CSS3提供了一種簡單的方式來實現(xiàn)圓角效果:
border-radius: 5px;
這個樣式將會把元素邊緣的角度變?yōu)橐粋€5像素的圓形。這項特性在現(xiàn)代瀏覽器中得到了廣泛的支持,包括Google Chrome、Firefox、Safari、Opera、IE9+等等。
然而,在一些舊版的瀏覽器中,圓角樣式將不會起作用。在這些瀏覽器中,元素的角仍然是標(biāo)準(zhǔn)的直角。但是,我們可以使用一些hack技巧來達到向后兼容的目的。以下是一些常見的hack方法:
/* Safari 1-3 Hack */ html[xmlns*=""]:root body:last-child .selector { border-radius: 5px; } /* Safari 2-3 Hack */ html[xmlns*=""]:root .selector { border-radius: 5px; } /* Firefox 1-3.6 Hack */ .selector { -moz-border-radius: 5px; } /* IE 7-8 Hack */ .selector { behavior: url(border-radius.htc); } /* IE 6-8 Hack */ .selector { background: url(border-radius.gif) no-repeat; behavior: url(border-radius.htc); }
這些hack方法可以讓你在舊版瀏覽器中實現(xiàn)圓角效果,但是它們并不是一個完美的解決方案。它們可能會降低頁面性能,而且它們也可能會與未來的瀏覽器版本不兼容。所以,最好的方法是最大限度地支持現(xiàn)代瀏覽器,但是也要記住向后兼容,以確保你的網(wǎng)站能夠在各種瀏覽器中正常顯示。