属性定义及使用说明
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>
