在 CSS 中使用裁剪可以帮助我们摆脱设计中看起来像盒子的所有元素。通过使用各种基本形状或 SVG,您可以创建裁剪路径。然后剪掉元素中您不想显示的部分。
网页上的元素均在矩形框内定义。但是,这并不意味着我们必须将所有内容看起来都像一个盒子。您可以使用 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()
值会创建一个圆形裁剪区域。第一个值是长度或百分比,是圆形的半径。
第二个可选值允许您设置圆心。在下面的示例中,我将使用关键字值将裁剪圆设置为右上角。
您也可以使用长度或百分比。
注意平坦边缘!
请注意上述所有值,表示元素上的外边距框会对形状进行裁剪。 如果您在图片上创建一个圆形,并且该形状超出图片的自然尺寸,则会获得一条平边。
![边缘平坦的裁剪圆](https://web.dev/static/articles/css-clipping/image/a-clipped-circle-flat-ed-92eec3384f5d2.jpg?authuser=3&hl=zh-cn)
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。