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定位的元素