一、基本概念
刷新 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;} |
