在CSS中,可以使用border-radius
屬性來(lái)設(shè)置元素的四個(gè)圓角。border-radius
屬性可以接收一個(gè)值,這個(gè)值將應(yīng)用于元素的所有四個(gè)圓角,如果你想要設(shè)置一個(gè)元素的圓角半徑為10px,你可以這樣寫(xiě):
element { border-radius: 10px; }
這將使元素的四個(gè)圓角都具有10px的半徑,如果你想要單獨(dú)設(shè)置每個(gè)角的半徑,你可以使用四個(gè)值來(lái)分別代表左上角、右上角、右下角和左上角的圓角半徑:
element { border-radius: 10px 20px 30px 40px; }
在這個(gè)例子中,左上角的圓角半徑為10px,右上角的圓角半徑為20px,右下角的圓角半徑為30px,左上角的圓角半徑為40px,如果你想要更***地控制每個(gè)角的形狀,你還可以使用斜線(xiàn)(/)來(lái)分別指定水平和垂直半徑:
element { border-radius: 10px 20px 30px 40px / 50px 60px 70px 80px; }
在這個(gè)例子中,左上角的圓角水平半徑為10px,垂直半徑為50px;右上角的圓角水平半徑為20px,垂直半徑為60px;右下角的圓角水平半徑為30px,垂直半徑為70px;左上角的圓角水平半徑為40px,垂直半徑為80px,通過(guò)這種方法,你可以***地控制每個(gè)角的形狀和大小。