关于clip-path属性的使用

1 使用场景:

　　　定义一个元素的可见区域: 对于一个元素, 我们有时候只是想要展示部分区域而不是展示整个区域

　　　这时候clip-path就派上用场了.

2 属性值:

　　(1) 几何框盒:

　　　　margin-box：使用 margin box 作为引用框。
　　　　border-box：使用 border box 作为引用框。
　　　　padding-box：使用 padding box 作为引用框。
　　　　content-box：使用 content box 作为引用框。
　　　　fill-box：利用对象边界框作为引用框。
　　　　stroke-box：使用笔触边界框（stroke bounding box）作为引用框。
　　　　view-box：使用最近的 SVG 视口（viewport）作为引用框。

　　　　　　　　　如果viewBox 属性被指定来为元素创建 SVG 视口，引用框将会被定位在坐标系的原点，引用框位于由 viewBox 属性建立的坐标系的原点, 引用框的尺寸用来设置viewBox 属性的宽高值

　　　　none: 不创建裁剪路径

　　(2) 自定义形状:

　　　　inset() : 定义一个矩形 。注意，定义矩形不是rect，而是 inset。

　　　　　　五个参数:　　分别对应top,right,bottom,left的裁剪位置,round radius（可选，圆角）。

　　　　circle(): 定义一个圆形.

　　　　　　两个参数: 　　圆的半径 和 圆心位置  

　　　　　　示例:　　clip-path: circle(30% at 200px 200px);

　　　　ellipse(): 定义一个椭圆

　　　　　　三个参数:　　椭圆X轴半径(默认宽度一半) 和 椭圆Y轴的半径(默认高度的一半) 和 椭圆中心位置(默认元素中心点)

　　　　polygon(): 定义一个多边形

　　　　　　具体的填充规则详见MDN