在CSS中,我們可以使用border-radius
屬性來打開圓角,這個(gè)屬性可以設(shè)置一個(gè)元素的邊框的圓角程度。
如果我們想要設(shè)置一個(gè)元素的四個(gè)角都為圓角,我們可以這樣寫:
element { border-radius: 10px; }
這會(huì)將元素的四個(gè)角都設(shè)置為10px的圓角,如果我們想要設(shè)置不同角的圓角程度,我們也可以分開寫:
element { border-radius: 10px 20px 30px 40px; }
這會(huì)將元素的四個(gè)角分別設(shè)置為10px、20px、30px和40px的圓角,注意,這個(gè)屬性的值可以是任何有效的CSS長度單位,如px、em、rem等。
我們還可以使用border-radius
屬性的其他值來進(jìn)一步控制圓角的形狀,我們可以使用ellipse
關(guān)鍵字來創(chuàng)建一個(gè)橢圓形的圓角:
element { border-radius: 10px 20px 30px 40px / 50px 60px 70px 80px; }
這將會(huì)創(chuàng)建一個(gè)橢圓形的圓角,其中水平和垂直半徑分別由兩個(gè)值定義。
border-radius
屬性是一個(gè)非常強(qiáng)大的CSS屬性,可以讓我們輕松地創(chuàng)建各種形狀和程度的圓角。