CSS 是一種用于控制網(wǎng)頁外觀的語言,可以通過它來裁切圖片。在 CSS 中,使用裁剪功能可以削減圖像的一部分或者將圖像大小調(diào)整為適合當(dāng)前布局的大小。
img { clip-path: polygon(0 0, 100% 0%, 100% 50%, 0 50%); }
在上面的代碼中,使用 clip-path 屬性指定要剪裁的路徑。polygon 函數(shù)指定了四個點(diǎn)的坐標(biāo),這四個點(diǎn)組成了一個矩形。這個矩形將覆蓋圖像的左上角、右上角和下半部分,從而剪切了圖像的一部分。
img { border-radius: 50%; }
在上面的代碼中,使用 border-radius 屬性將圖像的邊框半徑設(shè)置為 50%。這會將圖像剪切成圓形。
這些 CSS 剪切技術(shù)可用于創(chuàng)建具有藝術(shù)效果的形狀和觸發(fā)器——在用戶與網(wǎng)頁交互時調(diào)用 JavaScript 事件。 CSS 裁切技術(shù)使圖片更靈活地適應(yīng)網(wǎng)頁,并允許設(shè)計(jì)師創(chuàng)建獨(dú)特而有趣的布局。