CSS中通過border-radius屬性可以實現方形元素上邊框的圓角化,使得視覺效果更加美觀。同樣,我們也可以通過border-top-right-radius和border-top-left-radius屬性來實現只對上邊框進行圓角化。
/* 圓角化所有邊框 */ div{ border-radius:10px; } /* 只圓角化上邊框 */ div{ border-top-right-radius:10px; border-top-left-radius:10px; }
我們也可以通過控制邊框的每個角的半徑,來實現更加細致的邊框圓角效果,如下所示:
/* 4個角的圓角半徑分別為5px、10px、15px、20px */ div{ border-top-left-radius:5px 10px 15px 20px; border-top-right-radius:20px 15px 10px 5px; border-bottom-right-radius:5px 10px 15px 20px; border-bottom-left-radius:20px 15px 10px 5px; }
此外,我們還可以通過使用border-image屬性來實現更加復雜的邊框效果,具體實現方法可以參考CSS3的相關資料。