此页面由 Cloud Translation API 翻译。

使用 CSS 的 clip-path 属性创建有趣的图片形状

在 CSS 中使用剪辑功能可以帮助我们摆脱设计中看起来像一个方框的所有内容。通过使用各种基本形状或 SVG，您可以创建裁剪路径。然后，剪掉您不想显示的元素部分。

Rachel Andrew

网页上的元素均在矩形框内定义。但是，这并不意味着我们必须让所有内容都像一个盒子。您可以使用 CSS clip-path 属性来裁剪图片或其他元素的某些部分，创造有趣的效果

在上面的示例中，气球图片是正方形（来源）。使用 clip-path 和 circle() 的基本形状值气球周围额外的天空被裁剪掉，在页面上留下一幅圆形图片。

由于图片是链接，因此您可以看到有关 clip-path 属性的其他信息。只能点击图片的可见区域因为事件不会在图片的隐藏部分触发

裁剪可应用于任何 HTML 元素，而不仅仅是图片。创建 clip-path 有几种不同的方法，本文将介绍这些方法。

浏览器兼容性

浏览器支持

对于旧版浏览器，后备方案可能是允许浏览器忽略 clip-path 属性并显示未剪裁的图片。如果这是一个问题，您可以在功能查询中测试 clip-path，并为不支持的浏览器提供备用布局。

@supports(clip-path: circle(45%)) {
  /* code that requires clip-path here. */
}

clip-path 属性可以接受多个值。初始示例中使用的值是 circle()。这是其中一个基本形状值，在 CSS 形状规范。这意味着您可以裁剪某个区域，并为 shape-outside 使用相同的值，使文本环绕该形状。

注意：请注意，CSS 形状只能应用于浮动元素。clip-path 属性不要求元素处于悬浮状态。

基本形状的完整列表为：

inset() 值会从元素边缘内嵌剪裁区域，并且可以传递上边、右边、下边和左边的值。还可以添加 border-radius 以弯曲裁剪区域的角，使用 round 关键字。

在我的示例中，我有两个框，其类均为 .box。第一个框没有裁剪，第二个框使用 inset() 值裁剪。

如您所见，circle() 值会创建一个圆形剪裁区域。第一个值是长度或百分比，是圆形的半径。第二个可选值允许您设置圆的中心。在下面的示例中，我使用关键字值将裁剪圆形设置为右上角。您也可以使用长度或百分比。

请注意，使用上述所有值后，元素的外边距框都会裁剪形状。如果您在图片上创建一个圆形并且该形状会超出图片的自然尺寸，就会得到平坦的边缘。

椭圆形本质上是一个挤压的圆，因此，它的行为方式与 circle() 非常相似，但对于 x 接受半径，为 y 接受半径。加上椭圆形的中心的值。

polygon() 值可以帮助您通过设置每个点的坐标来创建相当复杂的形状，从而定义所需的任意多个点。

如需创建多边形并了解可实现的功能，请使用 Clippy（clip-path 生成器），然后将代码复制并粘贴到您自己的项目中。

CSS Shapes 中也有来自 box 值的形状。这些元素与 CSS 框模型相关，即内容框、内边距框、边框关键字值为 content-box、border-box、padding-box 和 margin-box 的外边距框。

这些值可以单独使用，也可以与基本形状一起使用，以定义形状使用的参考框。例如，以下代码会将形状剪裁到内容边缘。

.box {
  clip-path: content-box;
}

在此示例中，圆形会使用 content-box 而不是 margin-box（默认值）作为参考框。

.box {
  clip-path: circle(45%) content-box;
}

目前，浏览器不支持为 clip-path 属性使用 box 值。不过，shape-outside 支持这些函数。

相较于基本形状，想要更好地控制裁剪区域，请使用 SVG clipPath 元素。然后，使用 url() 作为 clip-path 的值来引用该 ID。

您可以将 CSS 过渡和动画应用于 clip-path，以创建一些有趣的效果。在下一个示例中，我将通过在两个具有不同半径值的圆形之间过渡，使悬停时的圆形动画呈现动画效果。

有许多创新方式可以将动画与剪辑结合使用。在 CSS 技巧中使用剪辑路径添加动画介绍一些想法。

摄影：Matthew Henry，拍摄于 Burst。