CSS3可以讓我們實現(xiàn)很多漂亮的效果，比如當(dāng)鼠標經(jīng)過一個圖片時，讓它變成圓形。下面我們就來學(xué)習(xí)一下如何用CSS3來實現(xiàn)這個效果。

/* 創(chuàng)建圓形圖片 */
.img-circle {
border-radius: 50%; /* 將圖片設(shè)置成圓形 */
width: 200px; /* 圖片的寬度 */
height: 200px; /* 圖片的高度 */
}
/* 添加鼠標經(jīng)過效果 */
.img-circle:hover {
transform: scale(1.1); /* 圖片放大 10% */
}

首先，我們要將圖片設(shè)置成圓形。這里我們使用border-radius屬性將圖片的邊角設(shè)置成50%即可。注意，圖片的寬度和高度需要相等，否則會變成橢圓形。

接下來，我們添加鼠標經(jīng)過效果。這里我們使用transform屬性來控制圖片的大小。當(dāng)鼠標經(jīng)過時，將圖片的大小放大10%即可。

如此一來，當(dāng)鼠標經(jīng)過圖片時，它就會變成一個漂亮的圓形了。此外，我們還可以通過其他CSS屬性來自定義這個效果，比如添加漸變或陰影效果，讓我們的圖片更為生動有趣。