33: 剪裁和遮罩

剪裁和遮罩的概念很简单。隐藏元素的某些部分，显示其他部分。它们之间的实际区别也很简单。剪裁始终是矢量路径，路径内部可见，路径外部不可见。而遮罩则是一张图像，被视为灰度图像，黑色部分将图像遮罩为透明，白色部分则让图像透过。

然而，实现剪裁和遮罩并不容易，因为浏览器对它的支持（以及所有细微之处）差异很大。在本期视频中，我们将尝试讲解所有内容，包括所有的困难。

所有可能性的语法是

.clip-me { 

  /* referencing path from an inline SVG <clipPath> */
  clip-path: url(#c1); 

  /* referencing path from external SVG */
  clip-path: url(path.svg#c1);

  /* polygon */
  clip-path: polygon(5% 5%, 100% 0%, 100% 75%, 75% 75%, 75% 100%, 50% 75%, 0% 75%);

  /* circle */
  clip-path: circle(30px at 35px 35px);

  /* ellipse */
  clip-path: ellipse(65px 30px at 125px 40px);

  /* inset-rectangle() may replace inset() ? */
  /* rectangle() coming in SVG 2 */

   /* Masking */
   /* mask-image, mask-position, mask-repeat, mask-clip, mask-size ... */
   mask: url(mask.svg);
   mask-type: luminance || alpha;

   -webkit-mask-box-image: url(stampTiles.svg) 30 repeat;
   mask-border: url(stampTiles.svg) 30 repeat;

}

在本期视频中，我们使用的一些演示内容 在这里 和 这里。

以下是一些关于它的资源：

• clip-path 在CSS-Tricks年鉴上
• CSS中的剪裁和遮罩
• WPD上的clip-path
• MDN上的clip-path
• MDN上的剪裁和遮罩
• CSS 剪裁属性（已弃用）（Impressive Webs）
• CSS 遮罩规范
• CSS 遮罩 由Dirk Schulze撰写
• CSS和SVG中的剪裁 - clip-path属性和<clipPath>元素 由Sara Soueidan撰写
• CodePen上带有clip-path标签的演示文稿
• 演示和浏览器支持演示 由Yoksel撰写
• SVG 遮罩 由Jakob Jenkov撰写
• Alan Greenblatt关于剪裁和遮罩功能的浏览器支持级别研究