Photoshop教學

clip-path CSS 属性使用裁剪方式创建元素的可显示区域。 区域内的部分显示，区域外的隐藏。

大家好 今天用這張圖像作裁切 裁切大小還可以再移動要隱藏的部分 先設定要看到的圖像尺寸 再用 overflow 屬性，隱藏超出的部分 margin 移動 img 位置 .box width: 300px; height: 300px; overflow: hidden; background: #f80; } 設定要裁切的原圖尺寸和移動位置

clip-path 是 CSS 屬性可以把圖片遮住、隱藏部分不希望被看到，因為載入到網頁的圖片都會是矩形的，所以用 clip-path 裁切簡單的幾何形或是使用SVG 、 path 路徑畫出裁切外框。

clip-path 是個特別的 CSS 樣式屬性，可以在網頁元素裡定義一出個「裁切形狀」，讓元素只顯示裁切形狀的內容，裁切形狀外圍都會變成透明背景，這篇教學會介紹如何使用 clip-path 裁切路徑，繪製各種正多邊形以及不規則的圖形，最後還會介紹使用 url () 搭配 SVG ...

clip-path属性允许你将元素裁剪为基本形状（圆形，椭圆形，多边形或嵌入）或 SVG ，从而在 CSS 中制作复杂形状。 两个或更多个具有相同点数的剪辑路径形状可以使用CSS的动画（Animations）和过渡（transitions）。 Browser Support caniuse.com.

在 網頁設計 上，有時我們只要擷取圖片的一部分時，若是還要另外切圖片的話又會顯得累贅，這時我們可以用CSS的屬性來自由裁切圖片囉！

shape () 函数使用一组大致等同于 path () 所用命令的命令，但它使用的是更标准的 CSS 语法，并且允许使用完整的 CSS 功能，例如 px rem % 单位和数学函数。