CSS不規則圖片邊實現是前端開發中的一個比較常見的效果,通過這個效果可以輕松實現圖片的形狀裁剪,使其不再呈現傳統的矩形或圓形,而變得更加豐富多彩。
.irregular-image { background: url(image.jpg) no-repeat center center; background-size: cover; height: 200px; width: 300px; -webkit-clip-path: polygon(0 0, 100% 20%, 100% 80%, 0% 100%); clip-path: polygon(0 0, 100% 20%, 100% 80%, 0% 100%); }
實現這個效果的關鍵是利用CSS的clip-path屬性,它可以使用多種方式裁剪元素,其中之一就是使用polygon()函數指定多邊形的頂點,從而實現不規則形狀的裁剪。在上述代碼中,我們將一個四邊形裁剪成了一個斜三角形,這樣就可以輕松實現類似于折角或是傾斜的圖片邊。
不過需要注意的是,clip-path屬性目前并不是所有瀏覽器都支持,所以在使用時需要進行兼容性處理。在上述代碼中,我們使用了webkit前綴來指定Safari等Webkit內核的瀏覽器支持該屬性。