在前端設(shè)計(jì)中，為了讓網(wǎng)頁呈現(xiàn)更好的視覺效果，通常需要加入一些特殊的樣式效果。其中一個(gè)比較常用的效果是給圖片加上圓角。下面介紹一下如何使用CSS給圖片加上圓角。

img {
border-radius: 50%;
width: 300px;
height: 300px;
}

上述代碼中，我們使用了border-radius屬性來設(shè)置圖片的圓角。其中，radius表示半徑。50%的意思是將圖片的四個(gè)角變?yōu)閳A角，原理是通過將圖片四個(gè)角的部分裁剪出來，產(chǎn)生圓角的效果。

需要注意的是，此方法只能設(shè)置等寬、等高的圖片。否則，如果圖片寬高比例過大，圓角的效果會(huì)失真。如果要給非等寬、等高的圖片設(shè)置圓角，可以使用background-image設(shè)置背景，并通過background-size屬性等比例縮放。具體代碼如下：

div {
background-image: url("image.jpg");
background-position: center center;
background-size: cover;
border-radius: 50%;
width: 300px;
height: 300px;
}

上述代碼中，我們使用了background-image設(shè)置了圖片背景，并使用了cover屬性來等比例縮放。同樣，border-radius屬性用于設(shè)置圓角。

總之，CSS的border-radius屬性是給圖片加上圓角的最常用方法之一。通過此屬性，我們可以為圖片帶來更加美觀的視覺效果。