CSS圖片如何變成圓角矩形

在CSS中，我們可以使用border-radius屬性將圖片變成圓角矩形，我們需要將圖片設置為一個div元素的背景，然后應用border-radius屬性。

HTML結(jié)構(gòu)如下：

<div class="rounded-image">
  <img src="image.jpg" alt="Image Description">
</div>

CSS樣式如下：

.rounded-image {
  width: 200px; /* 寬度根據(jù)需求設置 */
  height: 200px; /* 高度根據(jù)需求設置 */
  border-radius: 50%; /* 將圖片變?yōu)橥耆珗A角的矩形 */
  background-size: cover; /* 確保圖片完全覆蓋div元素 */
  background-position: center; /* 將圖片居中顯示 */
}

在這個例子中，我們設置了一個200px * 200px的div元素，并將其背景設置為一張圖片，我們使用border-radius: 50%將圖片變?yōu)橐粋€完全圓角的矩形。background-size: cover確保圖片完全覆蓋div元素，而background-position: center則將圖片居中顯示。

這種方法可以實現(xiàn)將圖片變成圓角矩形的效果，而且非常簡單易用，如果你需要進一步的樣式調(diào)整，可以參考CSS的相關(guān)文檔。