CSS中可以使用border-radius
屬性來砍掉四周的角,該屬性可以設(shè)置一個元素四個角的圓角程度,要砍掉一個元素四周的角,可以將其border-radius
屬性設(shè)置為一個非零的值,例如10px
:
border-radius: 10px;
這將使該元素的四個角都變?yōu)閳A角,如果想要單獨控制某個角的圓角程度,可以使用單獨的border-top-left-radius
、border-top-right-radius
、border-bottom-left-radius
和border-bottom-right-radius
屬性,要只砍掉左上角的角,可以設(shè)置為:
border-top-left-radius: 10px;
如果想要恢復(fù)某個角的直角狀態(tài),可以將對應(yīng)的border-radius
屬性設(shè)置為0:
border-top-right-radius: 0;
需要注意的是,border-radius
屬性會影響元素的形狀,但并不會改變元素的大小,該屬性也可以應(yīng)用于邊框(border
)和背景(background
)的樣式中,以實現(xiàn)更豐富的視覺效果。