深刻理解 Css3 的 clip-path

clip-path CSS 属性能够建立一个只有元素的部分区域能够显示的剪切区域。区域内的部分显示，区域外的隐藏。clip-path属性代替了如今已经弃用的剪切 clip属性。clip-path的属性值能够是如下几种：

• clip-path属性值为inset；
  inset是将元素剪切为一个矩形，如clip-path:inset(10px)，括号内的值相似于margin、padding值的写法，能够写一个值，也能够写多个值。
• clip-path属性值为circle；
  circle是将元素剪切为一个圆形，如clip-path: circle(100px at 50% 50%)，100px表示圆的直径，50% 50%表示圆心。
• clip-path属性值为ellipse；
  circle是将元素剪切为一个椭形，如ellipse(150px 100px at 50% 50%)，150px 表示椭圆的水平半径，100px表示椭圆的垂直半径，50% 50%表示圆心。
• ...

clip-path还能够有多种，如polygon、path、svg等。更多参考：clip-path；

最后来看一个DEMO吧