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");
}