css clip-path

1.关于各种各样的兼容性，推荐使用网站 https://caniuse.com查看

2.clip-path的兼容性

clip-path:url()以及部分shapes已普遍适用于移动端浏览器，pc端ie，edge不兼容，firefox支持，chorome也存在不支持

3.clip-path的使用

clip-path：url(#id)  使用SVG中的<clipPath>路径

clip-path:url(path.svg#id)  外部SVG中的<clipPath>路径

clip-path:inset(上 右 下 左) 距离原始原始各边的距离

clip-path:circle(20px at 100px 100px)  圆

clip-path:ellipse(65px 30px at 125px 40px)  椭圆

clip-path:polygon() 多边形

4.clip-path 和clip的关系

clip:rect()可以实现和clip-path：inset()一样的效果，属性含义不同

clip:rect()实现隐藏，left>=rigth或bottom>=top

clip:rect()只适用于position:absolute和position:fixed定位的元素

转载于:https://www.cnblogs.com/cassie-coder/p/8757894.html