CSS clip-path 属性

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

实例

把图像裁剪为 50% 的圆：

<!DOCTYPE html>
<html>
<head>
<style>
img {
  clip-path: circle(50%);
}
</style>
</head>
<body>
<h1>clip-path 属性</h1>
<img src="/images/demo.png" width="188" height="267">
</body>
</html>

运行一下

定义和用法

clip-path 属性使您可以将元素裁剪为基本形状或 SVG 源。

注释：clip-path 将替代废弃的 clip 属性。

默认值：	none
继承：	否
动画制作：	支持（仅限 basic-shape 值）。请参阅：动画相关属性。
版本：	CSS Masking Module Level 1
JavaScript 语法：	object.style.clipPath="circle(50%)"

浏览器支持

表格中的数字注明了完全支持该属性的首个浏览器版本。

属性
clip-path	55.023.0 -webkit-	79.0*	54.0	9.16.1 -webkit-	42.015.0 -webkit-

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

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	默认值。不创建的剪切路径。

CSS clip-path 属性

实例

定义和用法

浏览器支持

CSS 语法

属性值

分类导航