属性定义及使用说明
clip-path 属性使用裁剪方式创建元素的可显示区域。区域内的部分显示，区域外的隐藏。可以指定一些特定形状。
注意： clip-path 属性将替换已弃用的 clip 属性。
| 默认值: | none |
|---|---|
| 继承: | no |
| 动画: | 支持。 |
| 版本: | CSS 屏蔽模块级别 1 |
| JavaScript syntax: | object.style.clipPath="circle(50%)" |
语法
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 | 设置属性为默认值。 |
| inherit | 属性值从父元素继承。 |
举例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
<style>
img {
clip-path: circle(50%);
}
</style>
</head>
<body>
<h2>clip-path 属性</h2>
<img src="https://static.runoob.com/images/mobile-icon.png" width="100" height="100">
</body>
</html>
标签：box,clip,引用,使用,path,CSS,属性 From： https://www.cnblogs.com/numver/p/16982940.html