在網(wǎng)頁(yè)設(shè)計(jì)中，圖片是不可或缺的元素，有時(shí)候我們需要讓圖片展現(xiàn)出圓角的效果來(lái)增強(qiáng)視覺(jué)效果。而在CSS中，我們可以使用border-radius屬性來(lái)實(shí)現(xiàn)圖片的圓角效果。

/* 將圖片的四個(gè)角都設(shè)置為圓角 */
img {
border-radius: 50%;
}

上述代碼中，我們將border-radius的值設(shè)置為50%，這表示將圖片的四個(gè)角都設(shè)置為圓角。同樣地，我們也可以通過(guò)border-radius屬性單獨(dú)設(shè)置某個(gè)角的圓角效果。

/* 將圖片的左上角和右下角設(shè)置為圓角 */
img {
border-top-left-radius: 50%;
border-bottom-right-radius: 50%;
}

除了使用border-radius屬性，我們還可以使用clip-path屬性來(lái)實(shí)現(xiàn)圖片的圓角效果。clip-path可以讓我們?cè)O(shè)置一個(gè)裁剪路徑，只顯示路徑內(nèi)的部分，而路徑外的部分將被裁剪掉。

/* 使用clip-path屬性實(shí)現(xiàn)圖片的圓角效果 */
img {
clip-path: circle(50% at center);
}

上述代碼中，我們使用circle()函數(shù)來(lái)創(chuàng)建一個(gè)圓形路徑，其參數(shù)50%表示圓形的半徑為圖片的一半大小，而at center則表示圓心在圖片的中心。通過(guò)設(shè)置clip-path屬性，我們成功實(shí)現(xiàn)了圖片的圓角效果。