<div>元素是HTML中用于劃分區塊的標簽，通過設置不同的CSS樣式，我們可以控制區塊元素的外觀和布局。本文將重點介紹如何使用CSS設置<div>元素的弧度，以實現圓角效果。
<div>元素的弧度可以通過CSS的border-radius屬性來設置。border-radius屬性指定了<div>元素的四個角的弧度大小，讓一個正方形的<div>元素變成一個圓角矩形，或者一個矩形的角變得更加圓滑。border-radius屬性可以接受不同的值，包括像素(px)、百分比(%)和em等。
下面我們將通過幾個實例來詳細解釋如何使用CSS設置<div>元素的弧度。，讓我們假設有如下代碼：

<p><div class="rounded-div">Hello, World!</div></p>

在上述代碼中，我們給<div>元素添加了一個class屬性，值為"rounded-div"。接下來，我們可以為這個類創建一個CSS樣式，如下所示：

.rounded-div{
border-radius: 10px;
}

在上述CSS樣式中，我們使用了border-radius屬性，并將值設置為10px。這表示<div>元素的所有角都將以10像素的弧度呈現。這樣，我們就實現了一個圓角矩形的效果。
除了使用像素值，我們還可以使用百分比值設置<div>元素的弧度。下面是一個示例代碼：

<p><div class="rounded-div">Hello, World!</div></p>

.rounded-div{
border-radius: 50%;
}

在上述代碼中，我們將border-radius的值設置為50%，表示<div>元素的四個角的弧度都將根據其尺寸的一半自動計算。這樣，無論<div>元素的尺寸如何變化，其所有角都將始終保持圓形。
最后，我們還可以使用em單位來設置<div>元素的弧度。em單位是相對于元素的字體大小而言的。下面是一個示例代碼：

<p><div class="rounded-div">Hello, World!</div></p>

.rounded-div{
font-size: 20px;
border-radius: 2em;
}

在上述代碼中，我們通過設置font-size屬性為20px，然后將border-radius的值設置為2em，實現了一個基于字體大小的圓角效果。即<div>元素的四個角的弧度等于字體大小的兩倍。
通過border-radius屬性，我們可以輕松地為<div>元素添加圓角效果。無論是使用像素、百分比還是em單位，我們都可以根據需要來設置<div>元素的弧度大小。這樣，我們可以創建出各種不同樣式的圓角區塊，使網頁設計更加豐富多樣。