CSS中的border-radius屬性可用于設置元素邊框的圓角。圓角的半徑值可以設置為一個或多個,分別作用于四個角。
{ border-radius: 10px; /* 所有四個角都設置為10px */ } { border-radius: 10px 20px; /* 左上角和右下角為10px,右上角和左下角為20px */ } { border-radius: 10px 20px 30px; /* 左上角為10px,右上角和左下角為20px,右下角為30px */ } { border-radius: 10px 20px 30px 40px; /* 左上角為10px,右上角為20px,右下角為30px,左下角為40px */ }
另外,border-radius屬性還可用于設置不同角的不同半徑值:
{ border-top-left-radius: 15px; /* 左上角半徑為15px */ border-top-right-radius: 25px; /* 右上角半徑為25px */ border-bottom-right-radius: 35px; /* 右下角半徑為35px */ border-bottom-left-radius: 45px; /* 左下角半徑為45px */ }
在使用border-radius屬性時,還可以設置特定的值:0(表示沒有圓角)、inherit(繼承父元素的圓角值)、initial(設置為默認的圓角值)等。
使用border-radius屬性可以讓元素看起來更加美觀和精致。我們可以用它來制作按鈕、輸入框、圖片等元素的圓角效果。
下一篇css 設置圖標的大小