目录

CSS clip-path 属性

❮上一节完整的CSS参考下一节❯

示例

将图片裁剪为 50% 的圆圈：

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

亲自试一试 »

定义和用法

这个clip-path属性允许您将元素剪辑为基本形状或 SVG 源。

笔记：这个clip-path属性替换已弃用的clip属性。

展示演示❯

默认值：	没有任何
遗传：	不
可动画：	是的，为了基本形状。阅读可动画的尝试一下
版本：	CSS 屏蔽模块级别 1
JavaScript 语法：	对象.style.clipPath="circle(50%)"尝试一下

浏览器支持

表中的数字指定完全支持该属性的第一个浏览器版本。

Property
clip-path	55.0 23.0 -webkit-	79.0	3.5	9.1 6.1 -webkit-	42.0 15.0 -webkit-

CSS 语法

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

属性值

Value	Description	Demo
clip-source	Defines a URL to an SVG <clipPath> element
basic-shape	Clips an element to a basic shape: circle, ellipse, polygon or inset	Demo ❯
margin-box	Uses the margin box as the reference box
border-box	Uses the border box as the reference box
padding-box	Uses the padding box as the reference box
content-box	Uses the content box as the reference box
fill-box	Uses the object bounding box as reference box
stroke-box	Uses the stroke bounding box as reference box
view-box	Uses the SVG viewport as reference box
none	This is default. No clipping is done
initial	Sets this property to its default value. Read about initial
inherit	Inherits this property from its parent element. Read about inherit

❮上一节完整的CSS参考下一节❯