前言

在传统的网页布局中，我们的页面元素都是或矩形、或圆形的，如果我们能够这种打破传统的矩形布局，那么在提升用户体验的同时还能造成一定的视觉冲击力

CSS 的clip-path属性，就能将这一设想变为现实，它宛如设计师手中的魔法剪刀，可以让你轻松裁剪元素，创造出各种不规则和富有创意的形状；从简单的圆形按钮到复杂的多边形设计，clip-path为开发者提供了丰富的表现力，既无需额外的图像资源，也不会增加页面的复杂度

简单介绍

clip-path是一个 CSS 属性，可用于定义元素的可见区域，即对元素进行裁剪，隐藏掉被裁剪区域外的部分；它可以创造出多种复杂的形状，而无需依赖额外的图像资源或大量的 HTML 结构

基本语法

• <clip-source>: 用url()引用SVG路径(<clipPath>)
• <basic-shape>: 定义裁剪区域的形状
• <geometry-box>: 可配合basic-shape使用，用于定义裁剪的参考框
• none: 没有裁剪效果，元素的完整内容显示

CSS 早期裁剪元素是启用clip属性，它主要用于绝对定位的元素，且仅支持矩形裁剪

在2001年，SVG 作为一种支持矢量图的标准，其中包含了clipPath元素，可以用来裁剪 SVG 图形

在2011年，W3C 开始制定 CSS Masking 模块，提出了clip-path属性，标志着clip-path从 SVG 扩展到了 CSS；到2013年，WebKit 率先实现支持，提供了实验性功能；在2014年，规范进一步扩展clip-path，允许使用path()函数来定义复杂的 SVG 路径；到2017年，得到主流浏览器的广泛支持；最终在2019年，W3C 发布了 CSS Masking Module Level 1 的 正式推荐标准，标志着clip-path正式成为 W3C 认可的 CSS 属性，定义了裁剪元素的规范行为和使用方式

其兼容性如下

裁剪路径

定义裁剪区域的形状，可以是几何形状或者 SVG 路径

Basic Shape

定义裁剪的几何形状，clip-path提供了几种常见的几何形状函数

inset

用于定义了一个矩形

• 对于<length-percentage>，可以是1、2或4个值，与 CSS 常规的margin等类似理解，其值表示距离参考框内侧的偏移量
• round后面接border-radius值，表示每个顶点的圆角值
• 值可以是百分比或单位数值

举个栗子

上侧代码效果如下

绿色区域表示参考框区域

circle

用于定义一个圆形裁剪区域，使用半径和位置来描述

• <radial-size>用于定义圆的半径，可以是单位数值、百分比或closest-side和farthest-side关键字
• closest-side表示圆心到参考框最近边缘的长度
• farthest-side表示圆心到参考框最远边缘的长度
• at后接<position>值，用于定位圆心位置，其值可以是单位数值、百分比或类似left的值

举个栗子

上侧代码效果如下

红点表示圆心位置

ellipse

用于定义一个椭圆形的裁剪区域，与circle使用类似

• <radial-size>用于定义椭圆的两个半径，按顺序为x和y，数值类型与circle一致
• at后接<position>用于定义椭圆圆心位置

举个栗子

上侧代码效果如下

polygon

通过任意个坐标对定义一个多边形形状

• fill-rule可以是nonzero(默认值)或evenodd，指定填充规则；利用polygon可以画出很多复杂图形，有些时候并不能很好地区分一个点算图形的外部还是内部，此时就需要根据填充规则判断，区分内外，从而给图形内上色或裁剪
• nonzero表示非零填充规则，计算原理为：从图形任意点向无限远画一条直线，计算直线穿过路径边界的次数，如果穿过路径时，路径的方向是顺时针，则加1；如果是逆时针，则减1，计算所有穿越路径的次数之和，结果非零，则为内部，反之就是外部，不算在裁剪区域内
• evenodd表示奇偶填充规则，计算原理为：从图形任意点向无限远画一条直线，计算直线穿过路径边界的次数，如果直线穿过边界的次数为奇数，则该区域被认为是内部，会被裁剪；如果次数为偶数，则该区域是外部，不会被裁剪
• 坐标值可以有任意对，表示多边形的各个顶点，数值可以是单位数值或百分比

举个栗子

上侧代码效果如下

path

通过路径命令定义一条路径，与 SVG 内<path>元素的d属性类似

• fill-rule与polygon类似，用于定义路径的哪些部分位于形状内，同样提供两个可选值：nonzero和evenodd
• <string>为路径命令字符串，特别的，路径中的所有长度都以像素作为隐式单位，且不能更改其它单位

举个栗子

大致可呈现效果

使用path可实现极其复杂的裁剪形状，但其存在数值单位仅可为像素的限制

针对这种限制，在 CSS 的一项实验性技术中，提出了shape()函数，它将初始起点与定义形状路径的一系列形状命令组合在一起，可以看着path的增强版，不再限制于像素单位，可以用百分比数值，使用更灵活；不过，仅有firefox提供实验性支持，感兴趣可以自行了解

Geometry Box

参考框是用于决定裁剪区域的相对参照物，其定义了几何形状的尺寸和位置，以下是几个常见参考框的介绍

边框盒 (border-box)：

• 元素的边框区域，即包含了内容、内边距(padding)、以及边框的区域
• 这是clip-path最常用(默认)的参考框

内容盒 (content-box)：

• 元素的内容区域，不包含内边距和边框
• 使用内容盒作为参考框时，裁剪形状只基于元素的内容区域计算

填充盒 (padding-box)：

• 元素的内容区域加上内边距，但不包含边框
• 这种参考框主要用于需要精确控制元素裁剪时，忽略掉边框

边距盒 (margin-box)：

• 元素的整个外部区域，包括边距
• 边距盒通常较少使用，除非希望裁剪形状涵盖所有元素空间，包括外部边距

大致效果参考如下

其中，margin不属于可见内容区域，故margin区域的内容不会显示

应用场景

clip-path的应用场景可以有很多，如：

裁剪图片：如何将图片裁剪成各种形状

创意按钮和卡片设计：结合clip-path和 CSS，实现独特的 UI 元素

页面布局中的非矩形设计：打造富有视觉冲击力的设计效果

动画效果：结合动画与clip-path，可以制作出有趣的裁剪效果，如：元素的某一部分逐渐出现或消失；形状由圆形变为矩形等

总结

CSS 的clip-path属性提供了强大且灵活的裁剪工具，它让网页设计更加富有创意，并且大大简化了布局设计的实现；无论是裁剪图片、设计 UI 元素，还是创造动画效果，clip-path都为前端开发者提供了无限的可能性；通过掌握clip-path，能够轻松地提升网页的视觉效果，让用户体验更加精彩