HTML怎么把div設置圓角 在 HTML 中，div 是常用的塊級元素，用來劃分頁面中的內容。然而，當我們想要美化 div 時，如何在其中加入圓角呢？下面介紹兩種實現方法。 第一種方法：使用 CSS border-radius 屬性 border-radius 屬性是 CSS3 中新增的屬性，可以用來設置元素的圓角。可以直接將其應用到 div 元素上。 示例代碼如下：

<style>
div {
width: 200px;
height: 100px;
border-radius: 30px;
background-color: #ccc;
}
</style>
<div></div>

解析：上述代碼中，我們給 div 添加了一個半徑為 30px 的圓角，背景顏色為 #ccc，然后就可以看到一個圓角矩形出現在頁面上。 第二種方法：使用 CSS3 圓角的屬性 CSS3 中還有一個叫做圓角屬性，可以方便地實現 div 的圓角。 示例代碼如下：

<style>
div {
width: 200px;
height: 100px;
-moz-border-radius: 30px; /* Mozilla Firefox */
-webkit-border-radius: 30px; /* Safari和Chrome */
border-radius: 30px; /* 標準語法 */
background-color: #ccc;
}
</style>
<div></div>

解析：上述代碼中，為了實現廣泛的瀏覽器兼容性，在圓角屬性中分別加入了對 Firefox、Safari 和 Chrome 的兼容代碼。其中，-moz 表示 Mozilla Firefox，-webkit 表示 Safari 和 Chrome。 總結 通過上述兩種方式，我們可以方便地將 div 元素設置為圓角形式。需要注意的是，選擇使用哪一種方法主要根據自己的需要和習慣來決定。其中，第二種方法更為常用，也符合標準語法的要求。