CSS clip-path 属性

介绍

CSS clip-path 属性可以设置一个基于形状的剪辑区域，只有在这个区域内的部分才会被显示，超出这个区域的部分则会被裁剪掉。

这个属性通常用于制作一些比较复杂的图形、布局或动画效果。

语法

clip-path: <basic-shape> | <geometry-box> | <url()> | polygon() | inset() | circle() | ellipse();

值

• <basic-shape>：基本形状，包括但不限于 circle()，ellipse()，inset() 和 polygon() 等。

• <geometry-box>：指定剪辑区域的盒子模型，可以是 fill-box，stroke-box，view-box 和 none。

• <url()>：指定一个 SVG 剪辑路径的 URL。

• polygon()：指定一个由多个点组成的多边形。

• inset()：指定一个由内边距组成的矩形。

• circle()：指定一个圆形，可以添加两个参数，分别为圆形的半径和圆心位置。

• ellipse()：指定一个椭圆形，可以添加两个参数，分别为长半轴和短半轴的长度和椭圆心的位置。

示例

基本形状

.element {
  clip-path: circle(50% at center);
}

这个示例在元素 .element 中创建了一个圆形的剪辑区域，直径是元素本身的宽度和高度，居中显示。

.element {
  clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
}

这个示例在元素 .element 中创建了一个由四个点组成的菱形剪辑区域，居中显示。

SVG 剪辑路径

.element {
  clip-path: url(path.svg);
}

这个示例在元素 .element 中使用了一个 SVG 图像 path.svg 作为剪辑路径，只有在这个路径内的部分才会被显示，超出这个路径的部分则会被裁剪掉。

图片蒙版

.element {
  -webkit-mask-image: url(mask.jpg);
  mask-image: url(mask.jpg);
}

这个示例在元素 .element 中使用图片作为蒙版，只有在蒙版区域内的部分才会被显示，超出这个区域的部分则会被裁剪掉。

注意事项

• clip-path 可以用来实现很多酷炫的效果，但兼容性不是很好，IE 和 Edge 浏览器并不支持。

• 如果使用 SVG 剪辑路径，需要注意路径的浏览器兼容性，尽量使用标准的 SVG 路径语法。