一、基本概念
刷新 QQ 空間動態時，發現一則廣告，隨著用戶上下滑動動態列表，就會自動切換廣告圖片，這樣的效果對移動端本就不大的屏幕來說，無疑是很精妙的考慮，這樣的效果是怎么實現的呢？
接下來就說說這個效果的具體實現思路：
在圖片上繪制圓，為什么就能顯示出第二張圖片呢？說到這里，就不得不說一下咱們今天的主角 clip-path，引用 MDN 上的描述：
clip-path屬性可以創建一個只有元素的部分區域可以顯示的剪切區域。區域內的部分顯示，區域外的隱藏。剪切區域是被引用內嵌的URL定義的路徑或者外部svg的路徑，或者作為一個形狀例如circle().。clip-path屬性代替了現在已經棄用的剪切 clip屬性。
clip-path 的含義就是裁剪路徑，通過指定的閉合路徑或者形狀，甚至是 SVG 中 clipPath 標簽定義的形狀，裁剪出部分需要保留的區域，這樣網頁中的布局實現可以是多種多樣的。
在 clip-path 出現之前，CSS2.1 中的 clip 屬性也有裁剪的效果，但是它只支持矩形，而且只對 position:absolute 或者 position:fixed 的元素生效，使用方式如下：
| clip: rect(60px, 60px, 60px, 60px); // 標準寫法clip: rect(60px 60px 60px 60px); // 兼容 ie 及 火狐瀏覽器 |
注意: rect 參數的順序為 top、right、botton、left
所有主流瀏覽器都支持 clip 屬性，在雪碧圖（ CSS Sprite ）的展示仍然有它的用武之地，但是由于 clip 屬性的局限性， clip 已經被 clip-path 代替。平常開發中我們可以使用 border、border-radius 等屬性制作三角形、圓或圓角矩形等簡單圖案，clip-path 為我們提供了更多的可能，結合 SVG 的 path、animate 等標簽可以制作更多的有趣的圖案。
二、用法實踐
clip-path 屬性可以裁剪出很多圖形，circle、ellipse、polygon、inset，同時也可以使用動畫和 SVG 的 clipPath 標簽。
圓 circle
| clip-path: circle(25% at 50% 50%); |
橢圓 ellipse
| clip-path: ellipse(25% 25% at 50% 50%); |
inset
| clip-path: inset(35% 35% 35% 35% round 0 70% 0 70%); |
多邊形 polygon
| clip-path: polygon(50% 0, 25% 50% ,75% 50%); |
url
| <section class="container"> <img src="img01.jpg" class="contract"> <img src="img02.jpg"></section><svg height="0" width="0"> <clipPath id="clip02"> <circle cx="400" cy="210" r="0"> <animate attributeType="CSS" attributeName="r" values="0;480;0" dur="9s" repeatCount="2" /> </circle> </clipPath></svg>.contract { clip-path: url(#clip02); z-index:1;} |
