浏览器会裁剪掉裁剪区域以外的区域，不仅是背景及其它类似的内容，也包括 border、text-shadow 等。浏览器不会捕获元素裁剪区域以外的 hover、click 等事件。 IE浏览器不支持，且低版本webkit内核浏览器需要添加-webkit-前缀。具体的浏览器兼容性请戳：Can I Use
语法
clip-path: <clip-source> | [ <basic-shape> || <geometry-box> ] | none。默认值为none。
/* Keyword values */
clip-path: none;
/* Image values */
clip-path: url(resources.svg#c1);
/* Box values
clip-path: fill-box;
clip-path: stroke-box;
clip-path: view-box;
clip-path: margin-box
clip-path: border-box
clip-path: padding-box
clip-path: content-box
/* Geometry values */
clip-path: inset(100px 50px);
clip-path: circle(50px at 0 100px);
clip-path: ellipse(25% 40% at 50% 50%);
clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
/* Box and geometry values combined */
clip-path: padding-box circle(50px at 0 100px);
/* Global values */
clip-path: inherit;
clip-path: initial;
clip-path: unset;
值
<clip-source>
用表示剪切元素的svg路径
<basic-shape>
使用一些基本的形状函数创建的一个形状：
inset(上下左右/上下 左右/上 左右 下/上 右 下 左)
inset( <shape-arg>{1,4} [round <border-radius>]? )
以上函数定义了一个插进的长方形。
上式的前四个参数分别代表了插进的长方形与相关盒模型的上，右，下与左边界和顶点的偏移量。这些参数遵循边际速记语法（the syntax of the margin shorthand），所以给予一个、两个、或四个值都能设置四个偏移量。
可选参数<border-radius>用于定义插进长方形顶点的圆弧角度，该参数同上遵循边际速记语法（the syntax of the margin shorthand），给予一个、两个、或四个值都能设置四个偏移量。
如果一对插进图形在通过堆叠产生的高于当前使用维度的维度中（例如，左右插进图像相叠75%）将会定义一个包围不了任何区域的图形。这种情况会在元素中产生一个空白且平坦的区域。
circle(半径 at 圆心的位置)
circle( [<shape-radius>]? [at <position>]? )
<shape-radius> 参数代表了 r， 即圆形的半径， 不接受负数作为该参数的值。一个以百分比表示的值将以公式 sqrt(width^2+height^2)/sqrt(2)计算，其中width与height为相关盒模型的宽与高。
<position> 参数定义了圆心的位置。省缺值为盒模型的中心。
ellipse(X轴半径 Y轴半径 at 圆心位置)
ellipse( [<shape-radius>{2}]? [at <position>]? )
<shape-radius> 参数代表了 rx 与 ry，其中 rx 代表了x轴方向的半径， ry代表了y轴方向的半径。该参数不接受负数值。以百分比表示的长度将把盒模型的宽与高作为参照，宽作为 rx 的参照值，高作为 ry 的参照值。
<position>参数定义了椭圆形圆心的位子。其省缺值为盒模型的中心。
polygon(各个顶点的坐标)
polygon( [<fill-rule>,]? [<shape-arg> <shape-arg>]# )
<fill-rule> 代表了填充规则（ filling rule ），即，如何填充该多边形。 可选值为 nonzero 和 evenodd。 该参数的省缺值为 nonzero。
每一对在列表中的参数都代表了多边形顶点的坐标， xi 与 yi ，i代表顶点的编号，即，第i个顶点。但是要从同一个方向绘制，如果顺时针绘制就一律顺时针，逆时针就一律逆时针，因为polygon是一个连续线段，若线段彼此有交集，裁剪区域就会有相减的情况发生，当然如果你特意需要这样的效果除外。
上文未曾解释的参数如下：
<shape-arg> = <length> | <percentage>
<shape-radius> = <length> | <percentage> | closest-side | farthest-side
为一个圆形或椭圆形定义一个半径。其省缺值为 closest-side。
closest-side 即图形中心到盒模型最近一条边之间的距离。对于圆形，该值在任意维度都表示最近的一条边。对于椭圆形，该值为半径维度最近的一条边。
farthest-side 取图形中心到盒模型最远一条边之间的距离作为值。对于圆形，该值在任意维度都是最远的一条边。对于椭圆形，该值为半径维度最远的一条边。
一个<basic-shape> 方法. 这种形状将会利用指定的<geometry-box>来定位和固定基本形状。如果没有geometry box（几何盒模型）特别指出的话，border-box将会是默认的盒模型。
<geometry-box>？
如果同<basic-shape>一起声明，它将为基本形状提供相应的参考盒子。通过自定义，它将利用确定的盒子边缘包括任何形状边角（比如说，被border-radius定义的剪切路径）。几何体盒子将会有以下的值：
fill-box
利用对象边界框作为引用框。
stroke-box
使用笔触边界框作为引用框
view-box
使用最近的SVG视口作为引用框。如果viewBox属性被指定来为元素创建SVG视口，引用框将会被定位在坐标系的原点，引用框位于由view-box属性建立的坐标系的原点，引用框的尺寸用来设置viewbox属性的宽高值。
margin-box
使用 margin box 作为引用框
border-box
使用 border box 作为引用框.
padding-box
使用 padding box 作为引用框.
content-box
使用 content box 作为引用框
none
这里没有创建的剪切路径。
实例：clip-path.html
clip-path属性还支持transition，但前提是相同的裁剪函数，及相同的参数个数，具体实例请戳：clip-path1.html
这里还有一些：简单图形裁剪
参考：clip-path
http://species-in-pieces.com 是世界一家知名的宣传濒危动物保护网站。，主要使用clip-path polygon实现了30个动物及30种变换
在线的路径裁剪工具：clippy
