要設置CSS圓角邊框,可以使用border-radius
屬性。該屬性控制邊框的圓角程度。
可以通過以下幾種方式設置圓角邊框:
border-radius
屬性并指定一個數值,表示邊框的圓角半徑。例如:.border {
border-radius: 10px;
}
這將使.border
元素的四個角都呈現出10像素的圓角。
border-top-left-radius
、border-top-right-radius
、border-bottom-left-radius
和border-bottom-right-radius
屬性來分別設置元素的四個角的圓角半徑。例如:.border {
border-top-left-radius: 10px;
border-top-right-radius: 20px;
border-bottom-left-radius: 30px;
border-bottom-right-radius: 40px;
}
這將使.border
元素的左上角、右上角、左下角和右下角分別呈現出10像素、20像素、30像素和40像素的圓角。
border-radius
屬性并指定兩個數值,第一個數值表示水平方向的圓角半徑,第二個數值表示垂直方向的圓角半徑。例如:.border {
border-radius: 10px 20px;
}
這將使.border
元素的左上角和右下角呈現出10像素的圓角,右上角和左下角呈現出20像素的圓角。
border-radius
屬性并指定一個大于或等于50%的數值,表示邊框的圓角半徑。例如:.border {
border-radius: 50%;
}
這將使.border
元素的四個角呈現出橢圓形的圓角。
請注意,border-radius
屬性可以與其他邊框相關的屬性(如border-width
、border-color
和border-style
)一起使用,以實現更復雜的邊框效果。