<div> 圓角</div>
<div>在網頁設計中，經常會使用各種各樣的邊框樣式來美化頁面，其中圓角是一種很常見的設計風格。通過給一個元素添加圓角樣式，可以使其邊框呈現出柔和、圓潤的效果。在CSS中，通過使用border-radius屬性可以輕松實現圓角效果。下面我們將通過幾個代碼案例來詳細解釋這個屬性的使用。</div>
<div>案例一：</div>
<div>，我們來看一個基本的圓角效果：</div>

.box {
width: 200px;
height: 200px;
background-color: #f2f2f2;
border-radius: 10px;
}

<div>在上述代碼中，我們創建了一個寬度和高度均為200px的盒子，并設置了背景顏色為#f2f2f2。通過border-radius屬性，我們將元素的四個角都設置為10px的圓角。這樣，盒子的邊框將呈現出圓潤的效果。</div>
<div>案例二：</div>
<div>接下來，我們來看一個更復雜的圓角效果：</div>

.box {
width: 200px;
height: 200px;
background-color: #f2f2f2;
border-radius: 10px 20px 30px 40px;
}

<div>在上述代碼中，我們依然創建了一個寬度和高度均為200px的盒子，并設置了背景顏色為#f2f2f2。但是這次，我們通過border-radius屬性給每個角分別設置了不同的圓角大小。具體來說，分別是左上角10px、右上角20px、右下角30px、左下角40px。這樣，盒子的每個角都將呈現出不同的圓潤效果。</div>
<div>案例三：</div>
<div>除了給盒子的四個角設置圓角，我們還可以通過border-top-left-radius、border-top-right-radius、border-bottom-left-radius、border-bottom-right-radius分別給盒子的每個角設置不同的圓角：</div>

.box {
width: 200px;
height: 200px;
background-color: #f2f2f2;
border-top-left-radius: 10px;
border-top-right-radius: 20px;
border-bottom-left-radius: 30px;
border-bottom-right-radius: 40px;
}

<div>在上述代碼中，我們通過四個不同的border-*-radius屬性給盒子的每個角設置了不同的圓角大小。具體來說，分別是左上角10px、右上角20px、右下角30px、左下角40px。這樣，盒子的每個角都將呈現出不同的圓潤效果。</div>
<div>：</div>
<div>通過使用border-radius屬性，我們可以很方便地給元素添加圓角效果，使其邊框呈現出柔和、圓潤的外觀。無論是給四個角設置相同的圓角大小，還是給每個角分別設置不同的圓角大小，都能輕松實現各種各樣的圓角效果。圓角樣式的運用可以提升網頁的整體美感，使用戶的視覺體驗更加舒適。</div>