CSS clip-path 属性

实例

裁剪一张图像，以圆形的方式显示 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: clip-source|basic-shape|margin-box|border-box|padding-box|content-box|fill-box|stroke-box|view-box|none|initial|inherit;

值	描述
clip-source	用 URL 表示剪切元素的路径
basic-shape	将元素裁剪为基本形状：圆形、椭圆形、多边形或插图
margin-box	使用外边距框作为引用框
border-box	使用边框作为引用框
padding-box	使用内边距框作为引用框
content-box	使用内容框作为引用框
fill-box	使用对象边界框作为引用框
stroke-box	使用笔触边界框（stroke bounding box）作为引用框
view-box	使用最近的 SVG 视口（viewport）作为引用框。
none	这是默认设置。没有剪辑
initial	设置属性为默认值。阅读关于 initial
inherit	属性值从父元素继承。阅读关于 inherit