CSS3是一種超文本樣式語言，用于定義網頁的展示風格，CSS3提供了很多樣式效果來給予網頁更好的視覺效果，其中之一就是圖片折角效果。

通過CSS3的

border-radius

屬性，我們可以將圖片的角落進行圓角處理，使其看起來更加柔和。

.image{
border-radius: 10px;
}

以上代碼將會對類名為“image”的元素應用10像素圓角,你也可以使用四個值分別指定每個角的半徑：

.image{
border-radius: 
10px /* top-left */,
0px /* top-right */,
0px /* bottom-right */,
10px /* bottom-left */;
}

除此之外，CSS3還修訂了一個新的屬性

clip-path

，用于使圖像具有裁剪效果，配合border-radius使用可以實現類似折角的效果。如下代碼：

.image{
border-radius: 10px;
clip-path: polygon(0 0, 100% 0%, 100% 70%, 70% 100%, 0% 100%);
}

以上代碼將會對類名為“image”的元素應用折角效果，你也可以改變polygon內參數的數值來創造出自己想要的效果。

CSS3圖片折角效果大大豐富了網頁的內容呈現，為網站設計找到了更多的創意方向。