在前端開發(fā)中，圖片的展示是非常重要的一環(huán)。而將圖片展示為圓角的效果，更能吸引用戶的眼球。在CSS中，我們可以使用border-radius屬性來實(shí)現(xiàn)圖片的圓角展示。

/* 圓角半徑為50%代表圖片顯示為圓形 */
img {
border-radius: 50%;
}
/* 設(shè)定圓角半徑為10px代表圖片為圓角矩形 */
img {
border-radius: 10px;
}
/* 多個圓角半徑值按順序為左上、右上、右下、左下 */
img {
border-radius: 10px 20px 30px 40px;
}

除此之外，在CSS3中，我們還可以使用對圖像應(yīng)用遮罩的方式來實(shí)現(xiàn)圓角效果，即使用clip-path屬性。通過clip-path，我們可以將一個元素裁剪成特定的形狀。

/* 使用clip-path將圖片裁剪成圓形 */
img {
-webkit-clip-path: circle(50% at center);
clip-path: circle(50% at center);
}
/* 使用clip-path裁剪成自定義的形狀 */
img {
-webkit-clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
}

無論是使用border-radius還是clip-path，都能夠?qū)D片展示為圓角或自定義角度的形狀，提升頁面的美觀度。