CSS中的clip-path区域裁剪属性使用教程

1、clip-path的简介

如果您需要在现代网站上 操作复杂的视觉效果，那么熟悉然后使用 CSS 属性 clip-path 尤为重要。

clip-path 属性可以像下面这样使用 :

 img {
  clip-path: url(#myClip);
}

2、clip-path的基本语法

clip-path 的基本语法十分简单，它只接受一个值：函数值。这个函数值指定了一个剪切路径，用来定义应该保留的区域。

clip-path: {basic-shape || url() || none}

none : 表示不应该使用裁剪路径 ，使用元素的边界盒子来控制元素

url() : 表示要使用一个 SVG <clipPath> 元素来指定裁剪路径。这个 SVG 元素应该一个 ID 用项

3、clip-path的使用场景

3.1 隐藏图像或文本外的内容

clip-path是产生视觉差异的神器，可以用来隐藏图像或文本的外部内容。

/* 将元素裁剪为圆形 */
.clip {
  clip-path: circle(50%);
}

3.2 制作特殊形状

clip-path也可以用于裁剪形状,如下例子：

/* 裁剪椭圆形状 */
img {
  clip-path: ellipse(50% 50% at 50% 50%);
}

3.3 制作图片遮罩效果

我们可以使用SVG，将它作为剪切路径应用到元素上。这时候，需要使用“url()”函数：

/* 用切割路径遮罩文本 */
h2 {
  background: url(https://assets.codepen.io/721952/c2.png) 50% / cover no-repeat;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  -webkit-clip-path: url(#wavy);
  clip-path: url(#wavy);
}
/* SVG 剪切路径 */
<svg>
  <defs>
    <clipPath id="wavy">
      <path d="M0 100 C 20 0 50 0 100 100 Z" />
    </clipPath>
  </defs>
</svg>

4、clip-path的兼容性

谷歌，火狐，Safari和Edge浏览器都支持clip-path。IE浏览器仅支持一小部分clip-path功能。

5、clip-path的局限性

clip-path 属性支持可伸展的大小，但是它们是基于像素的。这就意味着元素的大小必须已知。此外，clip-path 不会将被裁剪掉的像素从元素渲染中去除。这意味着浏览器虽然渲染了这些图像，但是对它们的显示进行了修剪。