在CSS中,我們可以使用border-radius
屬性來控制元素的圓角。border-radius
屬性可以設(shè)置一個元素的四個角中的每個角的半徑,或者設(shè)置四個角的相同半徑。
如果我們想要設(shè)置一個元素的四個角為圓角,我們可以這樣寫:
element { border-radius: 10px; }
上述代碼會將元素的四個角都設(shè)置為10px的圓角,如果我們想要設(shè)置不同角的半徑,我們可以這樣寫:
element { border-radius: 10px 20px 30px 40px; }
上述代碼會將元素的四個角分別設(shè)置為10px、20px、30px和40px的圓角,順序為左上角、右上角、右下角和左下角。
我們還可以使用border-radius
屬性的長形式border-top-left-radius
、border-top-right-radius
、border-bottom-left-radius
和border-bottom-right-radius
來分別設(shè)置每個角的半徑。
element { border-top-left-radius: 10px; border-top-right-radius: 20px; border-bottom-left-radius: 30px; border-bottom-right-radius: 40px; }
上述代碼會將元素的四個角分別設(shè)置為10px、20px、30px和40px的圓角,與短形式的效果相同。