<div>是HTML中最常用的元素之一，用于創建塊級盒子。通過使用<div>元素，可以輕松創建出各種布局和樣式。其中一個常見的應用就是使用<div>元素來實現圓形圖片的效果。
<div>圓形圖片可以使用CSS屬性來實現。，可以通過設置圖片的border-radius屬性來將其變為一個圓形。此屬性接受一個長度值作為參數，用于指定圓角的弧度。如果將該值設置為圖片寬度的一半，那么圖片就會呈現出圓形的效果。，可以使用CSS的overflow屬性來控制圖片超出圓形邊界的部分的顯示方式。將overflow屬性設置為hidden，可以讓圖片超出圓形邊界的部分被隱藏起來，只展示圓形區域內的內容。
以下是幾個使用<div>實現圓形圖片的代碼案例：
案例一：

HTML代碼：

<div class="circle-image">
<img src="image.jpg" alt="圓形圖片">
</div>

CSS代碼：

.circle-image {
width: 200px;
height: 200px;
border-radius: 50%;
overflow: hidden;
}
.circle-image img {
width: 100%;
height: auto;
}

在這個案例中，我們創建了一個<div>元素，并為其添加了一個類名"circle-image"。然后，在該<div>元素中嵌套了一個<img>元素，用于顯示圖片。通過設置類名為"circle-image"的<div>元素的寬高和邊框半徑，我們實現了一個圓形圖片的效果。同時，設置了overflow為hidden，以避免圖片超出圓形邊界的部分被顯示出來。

案例二：

HTML代碼：

<div class="circle-image"></div>

CSS代碼：

.circle-image {
width: 200px;
height: 200px;
border-radius: 50%;
background-image: url("image.jpg");
background-size: cover;
}

在這個案例中，我們并沒有在<div>元素中添加<img>元素，而是直接通過CSS的background-image屬性來設置背景圖片。通過設置background-size為cover，可以使得背景圖片完全覆蓋<div>元素，并保持其縱橫比例。同樣地，通過設置邊框半徑為50%，我們實現了一個圓形背景圖片的效果。

案例三：

HTML代碼：

<div class="circle-image">
<div class="circle-filter"></div>
<img src="image.jpg" alt="圓形圖片">
</div>

CSS代碼：

.circle-image {
width: 200px;
height: 200px;
border-radius: 50%;
overflow: hidden;
position: relative;
}
.circle-image .circle-filter {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
}
.circle-image img {
width: 100%;
height: auto;
}

在這個案例中，我們在<div>元素中添加了一個額外的<div>元素，并為其添加了一個類名"circle-filter"。通過設置其position為absolute，并將其置于<div>元素的最上層，我們創建了一個覆蓋整個圓形圖片的半透明黑色背景。這樣的效果常常用于在圓形圖片上疊加文本，以提高可讀性。

通過以上幾個案例，我們可以看到使用<div>元素可以輕松地實現各種各樣的圓形圖片效果。通過靈活運用CSS屬性和樣式，我們可以根據具體需求創建出獨特的圓形圖片。在實際項目中，也可以參考其他文章中的真實案例，進一步豐富和拓展圓形圖片的應用場景。