CSS中可以使用border-radius
屬性來讓元素的邊有弧度,該屬性可以設(shè)置一個數(shù)值,表示弧度的半徑大小,也可以設(shè)置為inherit
來繼承父元素的弧度設(shè)置。
如果要讓一個div元素的四個角都有弧度,可以這樣做:
div { border-radius: 10px; }
這樣,div元素的四個角都會變成半徑為10px的圓角。
如果想要單獨設(shè)置每個角的弧度,可以使用border-top-left-radius
、border-top-right-radius
、border-bottom-left-radius
和border-bottom-right-radius
這四個屬性來分別設(shè)置每個角的弧度。
如果要設(shè)置div元素的左上角和右下角有弧度,可以這樣做:
div { border-top-left-radius: 10px; border-bottom-right-radius: 20px; }
這樣,div元素的左上角和右下角分別會變成半徑為10px和20px的圓角,其他兩個角則不會有弧度。
需要注意的是,border-radius
屬性的值可以是像素、百分比等長度單位,如果設(shè)置為百分比,則表示相對于元素寬度的百分比。border-radius: 50%
表示將元素的四個角都設(shè)置為半徑為元素寬度一半的圓角。