兼容性

浏览器会裁剪掉裁剪区域以外的区域，不仅是背景及其它类似的内容，也包括 border、text-shadow 等。浏览器不会捕获元素裁剪区域以外的 hover、click 等事件（裁剪后无法设置阴影）。 IE浏览器不支持，Firefox 仅部分支持 clip-path，部分支持是指只支持形状和 URL(#path) 内联SVG的语法。Chrome、Safari 和 Opera 需要使用 -webkit- 的前缀兼容此属性。不支持外部的 SVG 形状。更多兼容信息可以点击这里查看 clip-path 浏览器兼容情况。

语法

W3C官方规范提供的 clip-path语法：

clip-path: | [ || ] | none

MDN中的定义

CSS 属性可以创建一个只有元素的部分区域可以显示的剪切区域。

区域内的部分显示，区域外的隐藏。

剪切区域是被引用内嵌的URL定义的路径或者外部svg的路径，或者作为一个形状例如circle().。clip-path属性代替了现在已经弃用的剪切 clip属性。

旧的clip

在 clip-path 出现之前，CSS2.1 中的 clip 属性也有裁剪的效果，但是它只支持矩形，而且只对 position:absolute 或者 position:fixed 的元素生效，使用方式如下：

  1. clip: rect(60px, 60px, 60px, 60px); // 标准写法
  2. clip: rect(60px  60px  60px  60px); // 兼容 ie 及 火狐浏览器
  3. 复制代码

API

  1. /* Keyword values */
  2. clip-path: none;
  4. /* <clip-source> values */ 
  5. clip-path: url(resources.svg#c1);
  7. /* <geometry-box> values */
  8. clip-path: margin-box;
  9. clip-path: border-box;
  10. clip-path: padding-box;
  11. clip-path: content-box;
  12. clip-path: fill-box;
  13. clip-path: stroke-box;
  14. clip-path: view-box;
  16. /* <basic-shape> values */
  17. clip-path: inset(100px 50px);
  18. clip-path: circle(50px at 0 100px);
  19. clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
  20. clip-path: path('M0.5,1 C0.5,1,0,0.7,0,0.3 A0.25,0.25,1,1,1,0.5,0.3 A0.25,0.25,1,1,1,1,0.3 C1,0.7,0.5,1,0.5,1 Z');
  22. /* Box and shape values combined   和padding-box一起使用*/ 
  23. clip-path: padding-box circle(50px at 0 100px);
  25. /* Global values */
  26. clip-path: inherit;
  27. clip-path: initial;
  28. clip-path: unset;

clip-path - 图1

  1.   .polygon{
  2.     clip-path: margin-box;
  3.     clip-path: polygon(0% 20%, 20% 30%, 20% 80%);
  4.     margin: 10%;
  5.   }

在上例中，元素的 margin-box 会作为参考，来决定裁剪点的实际位置。点（10%，10%）是 margin-box 的左上角，所以clip-path 的定位会根据此点进行计算。

border-radius提供的)的角的形状。

  • margin-box使用 margin box 作为引用框。
  • border-box使用 border box 作为引用框。
  • padding-box使用 padding box 作为引用框。
  • content-box使用 content box 作为引用框。
  • fill-box利用对象边界框作为引用框。
  • stroke-box使用笔触边界框（stroke bounding box）作为引用框view-box使用最近的 SVG 视口（viewport）作为引用框。如果[viewBox](https://developer.mozilla.org/zh-CN/docs/Web/SVG/Attribute/viewBox) 属性被指定来为元素创建 SVG 视口，引用框将会被定位在坐标系的原点，引用框位于由 viewBox 属性建立的坐标系的原点，引用框的尺寸用来设置 viewBox 属性的宽高值。

    绘制图形

    展示demo

    圆形 circle

    clip-path: circle(50px at 100px 100px); clip-path: circle(50% at 50% 50%);

表示在元素的 （50px, 50px）处，裁剪生成一个半径为 50px 的圆。
image.png

椭圆 ellipse

clip-path: ellipse(50% 25% at 50% 50%);

在元素的 （50%，50%）出，裁剪一个50% 25%的园
image.png

矩形 inset

inset常见用法为

clip-path:inset(top,right,bottom,left)

image.png

inset 中的round clip-path 中的inset除了又top,right,bottom,left外，还有一个round，后面接四个参数，表示剪切矩形的四个圆角。

clip-path:inset(0% 0% 0% 0% round 0 100% 0 100%)

image.png

多边形 polygon

——在计算坐标系的时候定位的中心点在左上角
image.png

clip-path: polygon(50% 0, 100% 100% ,0% 100%);

绘制一个三角形
image.png

url

  1. <section class="container">
  2.   <img src="img01.jpg" class="contract">
  3.   <img src="img02.jpg">
  4. </section>
  5. <svg height="0" width="0">
  6.   <clipPath id="clip02">
  7.     <circle cx="400" cy="210" r="0">
  8.       <animate
  9.         attributeType="CSS"
  10.         attributeName="r"
  11.         values="0;480;0"
  12.         dur="9s"
  13.         repeatCount="2"
  14.       />
  15.     </circle>
  16.   </clipPath>
  17. </svg>
  1. .contract {
  2.   clip-path: url(#clip02);
  3.   z-index:1;
  4. }

值得说明的是使用 SVG 的 clipPath 标签可以包裹 animate，其中 animate 标签的 attributeName 是指设置圆的半径，values 可以设置动画的帧，可以有多个值用分号分割，dur 是指动画的持续时间，repeatCount 是指动画的次数。

动画

支持transition 和animation 但 transiton的 polygon只支持相同的边，虽然我们也可以将多余的边转化为相同的点
animation多边形的变换示例

比较

以下内容以后补充

clipPath 和clip-path

clip-path和masking

clip-path和CSS Shapes