CSS的圓角是指將頁面元素的角變為圓形。在設計一個網頁時，使用圓角能夠使UI界面顯得更加美觀，也能夠使網頁的整體風格更加協調。而在HTML中，常常使用按鈕元素。下面我們將討論如何使用CSS來為按鈕添加圓角效果。
要為按鈕增加圓角效果，我們需要使用border-radius屬性。此屬性可以幫助我們改變元素邊框的角度。如下圖所示：
在CSS文件中，我們可以為按鈕添加以下代碼，讓按鈕具有圓角：
```
button{
border-radius: 4px;
}
```
這將使所有按鈕的邊框角變為圓形。但我們也可以通過修改border-radius屬性的值來改變按鈕的圓角大小。下面是一個例子：
```
button{
border-radius: 20px;
}
```
這會讓按鈕邊框的角變得更加圓潤。我們也可以指定圓角的方向，使按鈕有不同種類的圓角。比如，只改變按鈕的左上和右下角的角度：
```
button{
border-top-left-radius: 10px;
border-bottom-right-radius: 10px;
}
```
我們還可以使用多個屬性來添加不同的圓角：
```
button{
border-top-left-radius: 10px;
border-top-right-radius: 20px;
border-bottom-left-radius: 30px;
border-bottom-right-radius: 40px;
}
```
上面的代碼將會使按鈕的四個角的圓角大小都不相同。
最后，我們需要注意的一點是，在更換按鈕的外觀時，不應該犧牲用戶的使用體驗。如果按鈕的圓角太大或太小，用戶可能無法正確地理解按鈕的功能。我們應該選擇合適的圓角大小并避免過度使用圓角來影響UI的易用性。
```按鈕圓角css實例-編程中國
以下示例展示如何使用border-radius屬性設置按鈕的圓角。
當你放大頁面時，你可以看到按鈕的角變成了圓形。
請注意，我們選擇了合適的角度，以確保用戶可以看到按鈕的文本，同時也讓按鈕更加美觀。
button {
padding: 10px 16px;
border-radius: 10px;
border: none;
color: #fff;
background-color: #2196F3;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
}```