CSS clip-path 属性 详解
css3基础 2022-07-14 16:03:53小码哥的IT人生shichen
CSS clip-path 属性
定义和用法
clip-path 属性使您可以将元素裁剪为基本形状或 SVG 源。
注释：clip-path 将替代废弃的 clip 属性。
实例
把图像裁剪为 50% 的圆：
img {
clip-path: circle(50%);
}
完整实例【亲自试一试】：
<!DOCTYPE html>
<html>
<head>
<style>
img {
clip-path: circle(50%);
}
</style>
</head>
<body>
<h1>clip-path 属性</h1>
<img src="/i/logo/w3logo-1.png" width="188" height="267">
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
CSS 语法
clip-path: clip-source|basic-shape|margin-box|border-box|padding-box|content-box|fill-box|stroke-box|view-box|none;
属性值
| 值 | 描述 |
|---|---|
| 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 | 默认值。不创建的剪切路径。 |
技术细节
| 默认值： | none |
|---|---|
| 继承： | 否 |
| 动画制作： | 支持（仅限 basic-shape 值）。请参阅：动画相关属性。 |
| 版本： | CSS Masking Module Level 1 |
| JavaScript 语法： | object.style.clipPath="circle(50%)" |
浏览器支持
表格中的数字注明了完全支持该属性的首个浏览器版本。
| Chrome | IE / Edge | Firefox | Safari | Opera |
|---|---|---|---|---|
| 55.0 23.0 -webkit- |
79.0* | 54.0 | 9.1 6.1 -webkit- |
42.0 15.0 -webkit- |
* Edge 仅在 SVG 元素（不支持 HTML 元素）上支持 clip-path。
