，我們來看一個簡單的例子：
<style>
.rounded-div {
border-radius: 10px;
width: 200px;
height: 200px;
background-color: #f0f0f0;
}
</style>
<br>
<div class="rounded-div"></div>在上面的代碼中，我們創(chuàng)建了一個 class 為 "rounded-div" 的 div 元素，并給它設(shè)置了圓角效果。border-radius 屬性的值為 10px，這意味著該元素的四個角將會以 10px 的半徑呈現(xiàn)圓角效果。運行以上代碼，你將會看到一個寬高為 200px 的灰色方塊，它的四個角都是圓角的。
除了設(shè)置固定的圓角半徑外，我們還可以根據(jù)需要對每個角獨立設(shè)置不同的半徑值。這樣做使得我們能夠創(chuàng)建更加自由和個性化的圓角設(shè)計，下面是一個例子：
<style>
.custom-rounded-div {
border-top-left-radius: 10px;
border-top-right-radius: 20px;
border-bottom-left-radius: 30px;
border-bottom-right-radius: 40px;
width: 200px;
height: 200px;
background-color: #f0f0f0;
}
</style>
<br>
<div class="custom-rounded-div"></div>在上述代碼中，我們給每個角分別設(shè)置了不同的圓角半徑。border-top-left-radius 表示左上角的圓角半徑為 10px，border-top-right-radius 表示右上角的圓角半徑為 20px，border-bottom-left-radius 表示左下角的圓角半徑為 30px，border-bottom-right-radius 表示右下角的圓角半徑為 40px。這樣設(shè)置之后，我們得到的方塊將會呈現(xiàn)出不同角有不同弧度的圓角效果。
除了使用固定值來設(shè)置圓角半徑外，我們還可以使用相對值或百分比來實現(xiàn)動態(tài)可變的圓角效果。比如下面這個例子：
<style>
.dynamic-rounded-div {
border-radius: 50%;
width: 200px;
height: 200px;
background-color: #f0f0f0;
}
</style>
<br>
<div class="dynamic-rounded-div"></div>在上述代碼中，我們將 border-radius 屬性的值設(shè)置為 50%，這意味著該元素的四個角都將以寬度的 50% 的半徑呈現(xiàn)圓角效果。由于 div 元素的寬高都設(shè)為 200px，所以這里的圓角半徑實際上是 100px。這樣設(shè)置之后，我們得到的方塊將會呈現(xiàn)出圓形的圓角效果。
除了 div 元素，使用 border-radius 屬性還可以給其他 HTML 元素，比如 button、input 和 textarea 等設(shè)置圓角效果。下面是一個例子：
<style>
.rounded-button {
border-radius: 5px;
padding: 10px 20px;
background-color: #f0f0f0;
border: none;
cursor: pointer;
}
</style>
<br>
<button class="rounded-button">Click Me</button>在上述代碼中，我們給一個 button 元素設(shè)置了圓角，border-radius 的值為 5px，這意味著 button 的四個角都將以半徑 5px 的圓角呈現(xiàn)。同時我們還給 button 添加了一些樣式，使其看起來像一個圓角矩形按鈕。這樣，通過設(shè)置圓角，我們可以為不同的元素營造出不同的風(fēng)格和效果。
綜上所述，div 圓角 是通過設(shè)置 border-radius 屬性來實現(xiàn)的。我們可以設(shè)置固定值、分別設(shè)置不同角的半徑、使用相對值或百分比來實現(xiàn)動態(tài)圓角。除了 div 元素外，更多的 HTML 元素也可以通過設(shè)置 border-radius 屬性來實現(xiàn)圓角效果。通過圓角設(shè)計，我們可以使網(wǎng)頁看起來更加美觀和柔和。