<clip-source> | [ <basic-shape> || <geometry-box> ] | none
/*属性说明*/
<clip-source> = <url>
<basic-shape> = <inset()> | <circle()> | <ellipse()> | <polygon()>
<geometry-box> = <shape-box> | fill-box | stroke-box | view-box
//语法
inset( <length-percentage>{1,4} [ round <border-radius> ]? )
说明
inset()可以传入5个参数，分别对应top,right,bottom,left的裁剪位置,round radius（可选，圆角）
示例
clip-path: inset(2em 3em 2em 1em round 2em);
//语法
circle( [ <shape-radius> ]? [ at <position> ]? )
//说明
circle()可以传人2个可选参数；
1. 圆的半径，默认元素宽高中短的那个为直径，支持百分比
2. 圆心位置，默认为元素中心点
//半径公式
如果半径使用百分比：圆的半径 = (sqrt(width^2+height^2)/sqrt(2)) * 百分比
//示例
clip-path: circle(30% at 150px 120px);
//语法
ellipse( [ <shape-radius>{2} ]? [ at <position> ]? )
//说明
ellipse()可以传人3个可选参数；
1. 椭圆的X轴半径，默认是宽度的一半，支持百分比
2. 椭圆的Y轴半径，默认是高度的一半，支持百分比
3. 椭圆中心位置，默认是元素的中心点
//示例
clip-path: ellipse(45% 30% at 50% 50%);
//语法
polygon( <fill-rule>?,[ <length-percentage> <length-percentage> ]# )
//说明
<fill-rule>可选，表示填充规则用来确定该多边形的内部。可能的值有nonzero和evenodd,默认值是nonzero
后面的每对参数表示多边形的顶点坐标（X,Y），也就是连接点
//示例
clip-path: polygon(50% 0,100% 50%,0 100%);
Keyword values */
clip-path: none;
<clip-source> values
clip-path: url(resources.svg#c1);
<geometry-box> values
clip-path: margin-box;
clip-path: border-box;
clip-path: padding-box;
clip-path: content-box;
clip-path: fill-box;
clip-path: stroke-box;
clip-path: view-box;
<basic-shape> values
clip-path: inset(100px 50px);
clip-path: circle(50px at 0 100px);
clip-path: polygon(50% 0%,50% 100%,0% 50%);
clip-path: path('M0.5,1 C0.5,1,0.7,0.3 A0.25,0.25,0.5,0.3 C1,1 Z');
Box and shape values combined
clip-path: padding-box circle(50px at 0 100px);
Global values
clip-path: inherit;
clip-path: initial;
clip-path: unset;
<div class="img">
img src="images/1.jpg"/>
</div>
*{padding:0;margin:0;}
.img{width:630px;height:630px;}
.img img{display: block;100%;}
overflow: hidden;
-webkit-clip-path: polygon(0 0,0 0,100% 0,100% 0);
clip-path:
opacity: 0;
transition: opacity 1.1s ease 167ms,-webkit-clip-path 1.1s cubic-bezier(.19,.22,1); clip-path 1.1s cubic-bezier(.19,1),opacity 1.1s ease 167ms;
.img.current{ 1;
$(function(){
$(".img").addClass('current');
})
-webkit-clip-path: polygon(0 0,0 100%);
clip-path: polygon(0 0,0 100%);
-webkit-clip-path: polygon(0 0,0 100%);
服务热线 19970861797
