<div>圖片變形是指通過修改CSS樣式使圖片的形狀發生改變。在網頁設計中，圖片通常以矩形或正方形的形式展示，但有時候我們希望圖片能夠具有其他不規則的形狀，以更好地融入頁面的整體風格。通過使用CSS的transform屬性和各種形狀的clip-path屬性，我們可以輕松實現圖片的變形效果。</div>

，我們來看一個簡單的實例，將一個正方形的圖片變為一個圓形。

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

.circle {
width: 200px;
height: 200px;
border-radius: 50%;
overflow: hidden;
}
.circle img {
width: 100%;
height: 100%;
object-fit: cover;
}

在上面的代碼中，我們創建一個具有圓角邊框的容器，并將容器的寬度和高度設置為200像素。然后，我們將圖片的寬度和高度設置為100％，使其與容器的大小相匹配并充滿容器。邊框半徑設置為50％，使容器變為圓形。最后，通過設置overflow: hidden來隱藏超出容器邊界的部分，從而實現圖片的圓形展示效果。

接下來，讓我們看一下如何將一個長方形的圖片變為一個橢圓形。

<div class="ellipse">
<img src="image.jpg" alt="圖片" />
</div>

.ellipse {
width: 300px;
height: 200px;
border-radius: 50%;
overflow: hidden;
}
.ellipse img {
width: 100%;
height: 100%;
object-fit: cover;
}

在上面的代碼中，我們使用了與圓形圖片變形相同的方法，只是將容器的寬度設置為300像素，高度設置為200像素，從而使圖片展示為一個橢圓形。

除了圓形和橢圓形之外，我們還可以使用clip-path屬性創建其他形狀的圖片變形。下面是一個將圖片變形為五角星的例子。

<div class="star">
<img src="image.jpg" alt="圖片" />
</div>

.star {
width: 200px;
height: 200px;
clip-path: polygon(50% 0%, 63% 38%, 100% 38%, 69% 59%, 82% 100%, 50% 75%, 18% 100%, 31% 59%, 0% 38%, 37% 38%);
overflow: hidden;
}
.star img {
width: 100%;
height: 100%;
object-fit: cover;
}

在上面的代碼中，我們使用clip-path屬性設置了一個由十個點組成的多邊形，將圖片變形為五角星的形狀。每個點的坐標都是相對于容器的，我們可以根據需要調整這些坐標來創建不同形狀的圖片變形。

通過使用div和CSS的transform屬性和clip-path屬性，我們可以輕松實現各種形狀的圖片變形效果。這些變形效果可以提升網頁設計的獨特性和創意性，并使頁面展示更加生動有趣。