div 上圓角（border-radius）是一種CSS屬性，用于給 div 元素的邊框添加圓角效果。這個(gè)屬性可以讓我們輕松地創(chuàng)建圓角邊框，從而使頁(yè)面的設(shè)計(jì)更加美觀。在本文中，我們將通過幾個(gè)代碼案例來演示如何使用 border-radius 屬性來實(shí)現(xiàn)不同樣式的圓角效果。
第一個(gè)案例是一個(gè)基本的圓角 div，它擁有相同大小的圓角邊框。代碼如下所示：

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

在這個(gè)例子中，我們給 div 添加了一個(gè) 10 像素的border-radius值，以創(chuàng)建一個(gè)圓角的邊框。同時(shí)，我們還設(shè)置了背景顏色，寬度和高度，使其看起來更加完整。
第二個(gè)案例是一個(gè)帶有不同大小圓角的 div。代碼如下所示：

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

在這個(gè)例子中，我們使用了四個(gè)值來定義不同的圓角大小。順序是順時(shí)針從左上角開始，分別是左上角、右上角、右下角和左下角。這樣可以創(chuàng)建出不對(duì)稱的圓角效果。
第三個(gè)案例是一個(gè)只有部分邊框有圓角的 div。代碼如下所示：

div {
border-radius: 0 0 20px 20px;
background-color: #f2f2f2;
width: 200px;
height: 200px;
border: 2px solid #000;
border-top: none;
}

在這個(gè)例子中，我們通過設(shè)置border-radius的值來定義有圓角的邊框部分。同時(shí)，為了去掉頂部的邊框，我們使用了border-top: none;命令。
最后一個(gè)案例是一個(gè)帶有圓角和陰影效果的 div。代碼如下所示：

div {
border-radius: 10px;
background-color: #f2f2f2;
width: 200px;
height: 200px;
box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3);
}

在這個(gè)例子中，我們使用了box-shadow屬性為 div 添加了一個(gè)帶有陰影效果的邊框。通過調(diào)整box-shadow的值，我們可以創(chuàng)建出不同樣式的陰影效果。同時(shí)，我們還給 div 添加了圓角效果，使其整體看起來更加立體。
一下，div 上的圓角可以通過 CSS 的 border-radius 屬性來實(shí)現(xiàn)。我們可以根據(jù)需求來定義不同大小，甚至不對(duì)稱的圓角。同時(shí)，我們還可以通過添加陰影效果來進(jìn)一步增強(qiáng)圓角 div 的視覺效果。通過合理運(yùn)用這些技巧，我們可以為頁(yè)面設(shè)計(jì)增添更多的美感和吸引力。