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 |