clip 和 clip

clip:<shape> | auto | inherit;

• <shape>：shape是一个函数功能，当前只支持 rect (top, right, bottom, left) 属性。
• auto：这是一个默认值，表示不进行剪切。
• inherit：继承父元素的clip属性。

clip:rect (top, right, bottom, left)

.clip{   
  position:absolute;   
  clip:rect(30px,200px,150px,50px);   
}

clip:<clip-source> | [<basic-shape> || <geometry-box> ] | none;

• clip-source： 可以是内、外部的SVG的 <clipPath> 元素的url引用
• basic-shape：使用基本的形状函数创建的图形形状，如：circle()、ellipse()、inset() 和 polygon()

clip-path:circle( r at x y)

• r表示圆的半径
• x y：原点位置

clip-path:ellipse( r1 r2 at x y)

• r1：水平半径
• r2：垂直半径
• x y：圆心位置

clip-path: inset(top right bottom left round top-radius right-radius bottom-radius left-radius)

.polygon{   
  -webkit-clip-path:polygon(0 100%, 50% 0, 100% 100%);   
}   
.circle{   
  -webkit-clip-path: circle(20% at 50% 50%);   
}   
.ellipse{   
  -webkit-clip-path: ellipse(30% 20% at 50% 50%);   
}   
.inset{   
  -webkit-clip-path: inset(25% 0 round 0 25%);   
}

.text {   
  -webkit-clip-path: url(#svgTextPath);   
  clip-path: url(#svgTextPath);
			}