CSS圓角邊框是網(wǎng)頁設(shè)計中常用的一種效果,可以增加網(wǎng)頁的美觀性。但是在不同的瀏覽器中,對于 CSS圓角邊框的實現(xiàn)方式不盡相同,這就造成了兼容性的問題。
/* 實現(xiàn)圓角邊框的 CSS代碼 */ .box { border-radius: 10px; -webkit-border-radius: 10px; -moz-border-radius: 10px; -o-border-radius: 10px; border: 2px solid #333; }
上述代碼中,我們通過CSS的 border-radius 屬性來實現(xiàn)圓角邊框的效果,同時通過四種不同前綴的屬性,使得該 CSS屬性在各個主流瀏覽器中都能生效。
-webkit-:適用于 Safari 和 Chrome瀏覽器。 -moz-:適用于 Firefox瀏覽器。 -o-:適用于 Opera瀏覽器。 無前綴的 border-radius 屬性適用于IE9及以上版本。
通過以上兼容代碼,我們可以使得圓角邊框在各個主流瀏覽器中兼容性良好。