clip 和 clip

clip:<shape> | auto | inherit;

• <shape>：shape是一個函數(shù)功能，當(dāng)前只支持 rect (top, right, bottom, left) 屬性。
• auto：這是一個默認(rèn)值，表示不進(jìn)行剪切。
• 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： 可以是內(nèi)、外部的SVG的 <clipPath> 元素的url引用
• basic-shape：使用基本的形狀函數(shù)創(chuàng)建的圖形形狀，如：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);
			}