CSS clip-path 属性
定义和用法
clip-path 属性使您可以将元素裁剪为基本形状或 SVG 源。
注释: clip-path 将替代废弃的 clip 属性。
| 默认值: | none |
|---|---|
| 继承性: | no |
| 支持动画: | yes for basic-shape. 阅读有关动画的信息 测试一下 |
| 版本: | CSS Masking Module Level 1 |
| JavaScript 语法: | 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- |
* 在version 79 之前，Edge 只支持 SVG 元素（不是 HTML 元素）上的剪辑路径。
语法
clip: clip-source|basic-shape|margin-box|border-box|padding-box|content-box|fill-box|stroke-box|view-box|none|initial|inherit;
属性值
| 值 | 描述 | 试一试 |
|---|---|---|
| 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 | 默认值。不创建的剪切路径。 | |
| initial | 将此属性设置为其默认值。请参阅 initial | |
| inherit | 从其父元素继承此属性。请参阅 inherit |
