裁剪展示clip-path

clip-path屬性可以創建一個只有元素的部分區域可以顯示的剪切區域。區域內的部分顯示，區域外的隱藏。

雖然clip-path不是背景屬性，但這個屬性非常強大，但往往會結合背景屬性一起使用，達到一些效果。

舉例：（鼠標懸停時，放大裁剪的區域）

    .div1 {
        width: 320px;
        height: 320px;
        border: 1px solid red;
        background: url(http://img.smyhvae.com/20191006_1410.png) no-repeat;
        background-size: cover;

        /* 裁剪出圓形區域 */
        clip-path: circle(50px at 100px 100px);
        transition: clip-path .4s;
    }
    .div1:hover{
        /* 鼠標懸停時，裁剪出更大的圓形 */
        clip-path: circle(80px at 100px 100px);
    }

clip-path屬性的好處是，即使做了任何裁剪，容器的佔位大小是不變的。比如上方代碼中，容器的佔位大小一直都是 320px * 320px。這樣的話，也方便我們做一些動畫效果。

clip-path: polygon()舉例：

另外，通過 clip-path: (svg) 可以導入svg矢量圖，實現 iOS圖標的圓角。這裏就不詳細展開了。