<!-- wp:paragraph -->

在網頁設計中，div 邊角圓角是一種常用的技術，它可以使邊角變得圓滑，給網頁增加一些美感。在 HTML 和 CSS 中，我們可以使用一些代碼來實現這個效果。下面，我將通過幾個代碼案例詳細解釋說明如何使用 div 邊角圓角。

<!-- /wp:paragraph -->
<!-- wp:paragraph -->

1. 使用 CSS border-radius 屬性

<!-- /wp:paragraph -->
<!-- wp:paragraph -->

border-radius 是 CSS 中的一個屬性，它用于為元素設置圓角。我們可以通過為 div 元素添加 border-radius 屬性來實現邊角的圓角效果。

<!-- /wp:paragraph -->
<!-- wp:preformatted -->

<style>
.rounded-corners {
border-radius: 10px;
}
</style>
<br>
<div class="rounded-corners">
這是一個使用 border-radius 屬性設置的圓角 div 元素。
</div>

<!-- /wp:preformatted -->
<!-- wp:paragraph -->

2. 使用 CSS Clip-path 屬性

<!-- /wp:paragraph -->
<!-- wp:paragraph -->

除了 border-radius 屬性外，我們還可以使用 clip-path 屬性來創建 div 邊角圓角。clip-path 屬性允許我們創建自定義的剪切路徑，從而實現各種形狀的邊角效果。

<!-- /wp:paragraph -->
<!-- wp:preformatted -->

<style>
.rounded-corners {
-webkit-clip-path: polygon(10px 0, 100% 0, 100% 100%, 0 100%);
clip-path: polygon(10px 0, 100% 0, 100% 100%, 0 100%);
}
</style>
<br>
<div class="rounded-corners">
這是一個使用 clip-path 屬性設置的圓角 div 元素。
</div>

<!-- /wp:preformatted -->
<!-- wp:paragraph -->

3. 使用 CSS Pseudo-elements

<!-- /wp:paragraph -->
<!-- wp:paragraph -->

除了上述屬性外，我們還可以使用偽元素（::before 或 ::after）來實現 div 邊角圓角效果。通過添加偽元素，并對其進行定位和樣式設置，我們可以實現各種形狀的邊角效果。

<!-- /wp:paragraph -->
<!-- wp:preformatted -->

<style>
.rounded-corners {
position: relative;
}
<br>
    .rounded-corners::before {
content: "";
position: absolute;
top: 0;
left: 0;
border-radius: 10px;
background-color: red;
height: 50%;
width: 50%;
}
</style>
<br>
<div class="rounded-corners">
這是一個使用偽元素實現的圓角 div 元素。
</div>

<!-- /wp:preformatted -->
<!-- wp:paragraph -->

通過以上幾個代碼案例，我們可以發現實現 div 邊角圓角效果的方法有多種多樣。選擇合適的方法取決于具體的設計需求和個人偏好。無論使用哪種方法，div 邊角圓角都可以為網頁增添一絲精致和優雅。