在CSS中,我們可以使用border-radius
屬性來(lái)將元素的邊角設(shè)置為圓角,這個(gè)屬性接受的值可以是像素、百分比或者em單位,用來(lái)定義圓角的半徑大小。
如果你想要將一個(gè)元素的四個(gè)角都設(shè)置為圓角,你可以這樣寫:
.element { border-radius: 10px; }
這會(huì)將.element
類的元素的四個(gè)角都設(shè)置為10像素的圓角,如果你想要設(shè)置不同大小的圓角,可以使用斜線分隔的四個(gè)值,分別代表左上角、右上角、右下角和左上角的圓角半徑。
.element { border-radius: 10px 20px 30px 40px; }
這會(huì)將.element
類的元素的圓角半徑分別設(shè)置為10像素、20像素、30像素和40像素,注意,這個(gè)順序是順時(shí)針的,從左上角開始。
如果你想要只設(shè)置某一邊的圓角,可以使用border-top-left-radius
、border-top-right-radius
、border-bottom-left-radius
和border-bottom-right-radius
這四個(gè)屬性。
.element { border-top-left-radius: 10px; border-top-right-radius: 20px; border-bottom-left-radius: 30px; border-bottom-right-radius: 40px; }
這會(huì)將.element
類的元素的圓角半徑分別設(shè)置為10像素、20像素、30像素和40像素,與之前的例子效果相同。