CSS中圓角樣式可以通過border-radius屬性來實現。該屬性可以設置一個或多個圓角半徑值。
/* 設置所有四個角的半徑為10px */ border-radius: 10px; /* 設置左上角和右下角的半徑為20px,右上和左下角的半徑為10px */ border-radius: 20px 10px; /* 分別設置四個角的半徑 */ border-radius: 10px 20px 30px 40px;
還可以使用border-top-left-radius、border-top-right-radius、border-bottom-left-radius、border-bottom-right-radius分別設置每個角的半徑值:
/* 設置左上角的半徑為10px */ border-top-left-radius: 10px; /* 設置右下角的半徑為20px */ border-bottom-right-radius: 20px;
除了數值之外,圓角樣式也可以使用百分比來設置。例如,設置所有四個角為50%的圓角:
border-radius: 50%;
最后,我們可以將圓角樣式應用于不同的元素,如div、img、button等等。下面是一個例子:
div { border-radius: 20px; background-color: #eee; padding: 20px; } img { border-radius: 50%; } button { border-radius: 10px; background-color: #555; color: #fff; padding: 10px; border: none; }
上一篇css中怎么畫斜線
下一篇css中怎么不讓換行