邊框圓角是Web設計中常用的一種效果,可以讓頁面看起來更加柔和和美觀。如何設置邊框圓角呢?我們可以使用CSS的 border-radius 屬性來實現。
// 設置一個div元素的四個角為圓角 div { border-radius: 10px; } // 也可以分別設置每個角的圓角大小 div { border-top-left-radius: 10px; border-top-right-radius: 20px; border-bottom-right-radius: 30px; border-bottom-left-radius: 40px; }
border-radius 屬性接受一個或兩個值,其中一個值表示四個角的圓角大小都相同,兩個值分別表示水平和垂直方向的圓角大小。
如果需要分別設置每個角的圓角大小,則需要使用 border-top-left-radius、border-top-right-radius、border-bottom-right-radius 和 border-bottom-left-radius 四個屬性來分別設置。
需要注意的是,border-radius不支持IE9及以下版本,因此在進行兼容性處理時需要使用其他方式,例如通過 JavaScript 或 SVG 來實現。
下一篇css中顯示在最底層