clip

• 兼容性极好,通用的CSS属性。
• 设定一个矩形并指定其四边分别和上/左边的距离，该元素只有处于矩形内的部分会被展示。
• 对position为relative或static的元素无效。
• clip:rect (top, right, bottom, left);

clip-path

• 兼容性较差，不支持IE11及以下
• 可设置各种形状，且没有position限制
• 可以和clip共同作用于一个元素

示例

• none 默认值

• url() 传入svg路径

• inset( <length-percentage>{1,4} [ round <border-radius> ]? )
  矩形
  如clip-path: inset(2em 3em 2em 1em round 2em);

• circle( [ <shape-radius> ]? [ at <position> ]? )
  圆形，默认元素宽高中短的方向为半径，支持百分比。元素中心点为圆心
  如clip-path: circle(30% at 150px 120px);

• ellipse( [ <shape-radius>{2} ]? [ at <position> ]? )
  椭圆
  如clip-path: ellipse(45% 30% at 50% 50%);

• polygon( <fill-rule>? , [ <length-percentage> <length-percentage> ]# )
  多边形，<fill-rule>表示填充规则，可以为nonzero(默认)和evenodd，后面的每对参数表示多边形的顶点坐标（X,Y）
  如clip-path: polygon(50% 0,100% 50%,0 100%);

• 基本形状的参考框， margin-box、padding-box、border-box、content-box等，可以与其他函数共同作用
  如clip-path: padding-box circle(50px at 0 100px);

变形

clip-path属性支持transition，但前提是裁剪函数相同且参数个数相同