深刻理解 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吧