CSS clip-path 属性

最后更新于:2022-03-27 03:02:27

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