使用 CSS 的 clip-path 属性创建有趣的图片形状
网页上的元素均在矩形框内定义。但是，这并不意味着我们必须将所有内容看起来都像一个盒子。您可以使用 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 使用相同的值以使文本环绕该形状。
基本形状的完整列表为：
inset()
inset() 值从元素边缘插入裁剪区域，并可以传递顶部边缘、右侧边缘、底部边缘和左侧边缘的值。还可以使用 round 关键字添加 border-radius，使剪裁区域的角变为曲线。
在我的示例中，我有两个框，它们的类均为 .box。第一个框未进行裁剪，第二个框使用 inset() 值进行裁剪。
circle()
如您所见，circle() 值会创建一个圆形裁剪区域。第一个值是长度或百分比，是圆形的半径。 第二个可选值允许您设置圆心。在下面的示例中，我将使用关键字值将裁剪圆设置为右上角。 您也可以使用长度或百分比。
注意平坦边缘！
请注意上述所有值，表示元素上的外边距框会对形状进行裁剪。 如果您在图片上创建一个圆形，并且该形状超出图片的自然尺寸，则会获得一条平边。
之前使用的图片现在应用了 circle(50%)。由于图片不是正方形，我们点击顶部和底部的外边距框，圆圈会被裁剪掉。
ellipse()
椭圆形实际上就是一个压缩圆，因此其行为与 circle() 非常类似，但接受 x 的半径和 y 的半径，再加上椭圆中心的值。
polygon()
polygon() 值可帮助您创建相当复杂的形状，通过设置每个点的坐标，根据需要定义任意数量的点。
为帮助您创建多边形并查看可能性，请查看 clip-path 生成器 Clippy，然后将代码复制并粘贴到您自己的项目中。
由方框值组成的形状
CSS 形状中还包含方框值中的形状。这些内容与 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 属性使用框值。不过，shape-outside 支持这些属性。
使用 SVG 元素
为了更好地控制裁剪区域，而不是使用基本形状，请使用 SVG clipPath 元素。然后，使用 url() 作为 clip-path 的值来引用该 ID。
为裁剪区域添加动画效果
CSS 过渡和动画可以应用于 clip-path 以创建一些有趣的效果。在接下来这个示例中，我将通过在两个具有不同半径值的圆之间转换，为悬停的圆形添加动画效果。
可以通过许多富有创意的方式将动画与剪辑结合使用。在 CSS Tricks 中使用 clip-path 添加动画效果，看看一些创意。
照片由 Matthew Henry 拍摄，分享于 Burst。
