clip-path
1.含义?
clip-path是对CSS属性clip的升级。作用是==对元素进行裁剪==。利用裁剪这个特性，可以用来设计一些很炫的动画。
2.clip-path分类
basic-shape基本图形，包括inset,circle,eclipse,polygon。
clip-source:通过url方法引入一段SVG的<clipPath>作为裁剪路径。
3.Basic shape
一、Inset
矩形，不是rec。
inset() 用于**定义一个插进的矩形**，即被剪裁元素内部的一块矩形区域。
参数类型：
inset( <shape-arg>{1,4} [round <border-radius>]? )
其中 shape-arg 分别为矩形的上右下左顶点到被剪裁元素边缘的距离（和margin、padding参数类似），border-radius 为可选参数，用于定义 border 的圆角。
例如：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box{
width: 500px;
height: 500px;
background-color: skyblue;
}
.box:hover{
clip-path: inset(100px 100px 100px 100px round 20px);
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
二、circle
circle() 用于定义一个圆。
参数类型：
circle( [<shape-radius>]? [at <position>]? )
其中 shape-radius 为圆形的半径，position 为圆心的位置。
如果 shape-radius 为百分比，则 100% 相当于：
sqrt(width^2+height^2)/sqrt(2)
width、height分别为被剪裁元素的宽高。
三、Ellipse
ellipse() 用于定义一个椭圆。
参数类型：
ellipse( [<shape-radius>{2}]? [at <position>]? )
其中 shape-radius 为椭圆x、y轴的半径，position 为椭圆中心的位置。
四.、Polygon
polygon() 用于定义一个多边形。
参数类型：
polygon( [<fill-rule>,]? [<shape-arg> <shape-arg>]# )
其中 fill-rule 为填充规则，即通过一系列点去定义多边形的边界。
4、clip-source
html:
<svg>
<defs>
<clipPath id="svgCircle">
<circle cx="500" cy="500" r="400" />
</clipPath>
</defs>
</svg>
<img class="img svg-circle" src="http://source.unsplash.com/random/1000x1000" />
css:
.svg-circle {
clip-path: url("#svgCircle");
}