裁剪一張圖像，以圓形的方式顯示 50%：
img {
clip-path: circle(50%);
}
clip-path 屬性使用裁剪方式建立元素的可顯示區域。區域内的部分顯示，區域外的隐藏。可以指定一些特定形狀。
注意： clip-path 屬性将替換已棄用的 clip 屬性。
預設值:
none
繼承:
no
動畫:
支援。 閱讀關于 animatable
版本:
CSS 屏蔽子產品級别 1
JavaScript syntax:
object.style.clipPath="circle(50%)"
表格中的數字表示支援該屬性的第一個浏覽器版本号。
屬性
clip-path
55.0
23.0 -webkit-
79.0*
54.0
9.1
6.1 -webkit-
42.0
15.0 -webkit-
值
描述
clip-source
用 URL 表示剪切元素的路徑
basic-shape
将元素裁剪為基本形狀：圓形、橢圓形、多邊形或插圖
margin-box
使用外邊距框作為引用框
border-box
使用邊框作為引用框
padding-box
使用内邊距框作為引用框
content-box
使用内容框作為引用框
fill-box
使用對象邊界框作為引用框
stroke-box
使用筆觸邊界框（stroke bounding box）作為引用框
view-box
使用最近的 SVG 視口（viewport）作為引用框。
這是預設設定。 沒有剪輯
initial
設定屬性為預設值。 閱讀關于 initial
inherit
屬性值從父元素繼承。 閱讀關于 inherit