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。