CSS clip-path 屬性

定義和用法

clip-path 屬性使您可以將元素裁剪為基本形狀或 SVG 源。

注釋：clip-path 將替代廢棄的 clip 屬性。

實例

把圖像裁剪為 50% 的圓：

img {
  clip-path: circle(50%);
}

親自試一試

CSS 語法

clip-path: clip-source|basic-shape|margin-box|border-box|padding-box|content-box|fill-box|stroke-box|view-box|none;

屬性值

值 描述
clip-source 定義指向 SVG <clipPath> 元素的 URL。
basic-shape 把元素剪裁為基礎形狀：圓、橢圓、多邊形或星形。
margin-box 使用 margin box 作為引用框。
border-box 使用 border box 作為引用框。
padding-box 使用 padding box 作為引用框。
content-box 使用 content box 作為引用框。
fill-box 利用對象邊界框（object bounding box）作為引用框。
stroke-box 使用筆觸邊界框（stroke bounding box）作為引用框。
view-box 使用 SVG 視口作為引用框。
none 默認值。不創建的剪切路徑。

技術細節

默認值： none
繼承： 否
動畫制作： 支持（僅限 basic-shape 值）。請參閱：動畫相關屬性。
版本： CSS Masking Module Level 1
JavaScript 語法： object.style.clipPath="circle(50%)"

瀏覽器支持

表格中的數字注明了完全支持該屬性的首個瀏覽器版本。

Chrome IE / Edge Firefox Safari Opera
55.0
23.0 -webkit-		 79.0* 54.0 9.1
6.1 -webkit-		 42.0
15.0 -webkit-

* Edge 僅在 SVG 元素（不支持 HTML 元素）上支持 clip-path。