CSS3圖片變圓的方法

在CSS3中，我們可以使用border-radius屬性來(lái)將圖片變圓，這個(gè)屬性可以接收一個(gè)數(shù)值，表示圓的半徑大小，下面是一個(gè)簡(jiǎn)單的示例：

HTML代碼：

<img class="circle-image" src="image.jpg" alt="示例圖片">

CSS代碼：

.circle-image {
  border-radius: 50%;
}

在這個(gè)示例中，我們給圖片添加了一個(gè)類(lèi)名circle-image，然后在CSS中通過(guò)border-radius屬性將其設(shè)置為50%，這樣圖片就會(huì)變成一個(gè)圓形。

需要注意的是，如果圖片的寬高不一致，那么變圓后的圖片可能會(huì)變形，為了避免這種情況，我們可以將圖片的寬高設(shè)置為一致，或者通過(guò)其他方式保證圖片的寬高比例不變。

border-radius屬性不僅可以用于將圖片變圓，還可以用于設(shè)置其他形狀的邊框，比如橢圓、矩形等，通過(guò)調(diào)整數(shù)值和比例，我們可以輕松實(shí)現(xiàn)各種樣式的邊框效果。