CSS中,我們可以使用border-radius
屬性來將方框的邊角變圓,這個屬性接受的值可以是具體的像素值,也可以是百分比,下面是一些示例代碼:
1、將方框的四個角都變圓:
div { border-radius: 10px; }
2、只將方框的左上角和右下角變圓:
div { border-radius: 10px 0 0 10px; }
3、將方框的四個角都變圓,并使用百分比:
div { border-radius: 50%; }
需要注意的是,border-radius
屬性只在CSS3及以后的版本中受支持,在使用這個屬性時,需要確保你的瀏覽器版本支持CSS3。
如果你想要更精細(xì)地控制每個角的形狀,可以使用border-top-left-radius
、border-top-right-radius
、border-bottom-left-radius
和border-bottom-right-radius
這四個屬性來分別設(shè)置每個角的半徑,這些屬性的值和border-radius
一樣,可以是像素值或百分比。