CSS中的圓角圖片樣式,也稱為圓角矩形,是一種在Web設計中常用的效果。通過在圖片周圍添加圓角,可以使圖片更加柔和和美觀,使頁面看起來更加舒適。
img{ border-radius: 10px; }
上面的CSS代碼可以將圖片的四個角都設置成10像素的圓角。如果只想要某個角是圓角,可以使用以下代碼:
img{ border-top-left-radius: 10px; border-bottom-right-radius: 20px; }
上述代碼將左上角設置成10像素的圓角,右下角設置成20像素的圓角,其他兩個角則保持直角不變。使用border-radius屬性時,也可以使用百分比、em等單位。
除了使用border-radius屬性外,還可以使用CSS3中的clip-path屬性來實現圓角圖片。使用clip-path屬性時,需要指定圓角的大小和位置,具體代碼如下:
img{ clip-path: circle(50% at center); }
上述代碼將圖片剪裁成一個半徑為50%、圓心在圖片正中間的圓。使用clip-path屬性可以實現更加復雜的圓角效果,例如梯形圓角、星形圓角等。