【CSS in Depth 2 精译_086】14.3：CSS 剪切路径（clip-path）的用法

当前内容所在位置（可进入专栏查看其他译好的章节内容）

• 第四部分 视觉增强技术 ✔️
• 【第 14 章 蒙版、形状与剪切】 ✔️
  • 14.1 滤镜
    • 14.1.1 滤镜的类型
    • 14.1.2 背景滤镜
  • 14.2 蒙版
    • 14.2.1 带渐变效果的蒙版特效
    • 14.2.2 基于亮度来定义蒙版
    • 14.2.3 其他蒙版属性
  • 14.3 剪切路径 ✔️
    • 14.3.1 多边形的裁剪路径 ✔️
    • 14.3.2 Firefox 内置的剪切路径工具 ✔️
    • 14.3.3 其他剪切路径类型 ✔️
  • 14.4 浮动与形状

《CSS in Depth》新版封面

译者按
本篇延续了上一节的风格，提纲挈领地介绍了 CSS 剪切路径（clip-path）的操作技巧与相关注意事项。其中最引人注目的莫过于顺带介绍的参考阅读资料和线上小工具了。念书时常听老师讲，一千个读者有一千个哈姆雷特。同样的道理在这本硬核资料书中同样适用：是草草略过作者给出的延伸材料，还是一步一个脚印认真学习这些内容，书中无数个这样的细微抉择，其实就已经决定了读者未来能够到达的 CSS 乃至前端开发的高度。希望大家都能做一个对技术细节“斤斤计较”的有心人。

14.3 剪切路径 Clipping paths

剪切路径（clipping path） 是另一种有选择地隐藏元素局部区域的方法。剪切路径在概念上与蒙版类似，但它不是用图片来遮挡元素，而是通过数学方法来定义形状，即通过 clip-path 属性进行设置。

本节先为您演示剪切路径的一个典型案例，然后在逐步过渡到更复杂的知识点。本节第一个示例的最终效果如图 14.7 所示。其中，剪切形状被定义为一个圆。页面元素所有不在该形状内的部分就会被隐藏。此时，圆的尺寸大于图片高度，从而令元素可见部分的上下边缘呈直线、左右两边则呈曲线效果。

【图 14.7 矩形示例图片在设置剪切路径为圆形后的最终效果】

要实现上述效果，我们先根据代码清单 14.9 给出的 HTML 标记，给示例页面添加一个图片元素。操作时，既可以替换到前面演示的 HTML 元素，也可以将新的图片元素追加到页面末尾。

代码清单 14.9 演示剪切路径特效对应的图片 HTML 标记

<imgclass="clipped" src="images/eagle.jpg"alt="Golden Eagle"width="796" height="529"
/>

接着利用类名 clipped 选中该元素，并通过 clip-path 属性设置一个剪切路径；设置该属性最简单的一种方式就是使用 circle() 函数。该函数需要一个表示圆半径的长度值或百分数作参数。请根据代码清单 14.10 同步更新本地样式表。

代码清单 14.10 设置圆形剪切路径的示例样式代码

.clipped {clip-path: circle(398px); /* 剪切出一个半径为 398px 的圆 */
}

由于图片宽度设为了 796px，上述代码中的半径 398px 刚好是它的一半。此外还可以使用一个特殊的关键字实现相同的效果：circle(farthest-side)。同理，指定 circle(farthest-side) 将调整圆的大小并覆盖元素的上下边缘，只因它们是距离圆心最近的两条边。

注意

将属性 clip-path 的值设为除了初始值 none 以外的任意合法值后，页面会同步创建一个新的堆叠上下文（详见第 6 章相关内容）。

在本例中，剪切出的圆位于元素正中；但您也可以使用 at 关键字以及 x、y 坐标对剪切出的形状重新定位。这样，圆心就会移动到新的坐标位置。请根据下列示例代码更新样式表并查看页面效果：

.clipped {clip-path: circle(229px at 337px 293px);
}

样式更新后，剪切出的圆就跑到了鹰头的正中位置，同时圆的大小也进行了调整，使得图片大部分区域都不可见，仅渲染出了鹰的面部与喙。这些 x 和 y 坐标的值都是从元素边框盒（border box）的左上角开始测量的。圆的尺寸和方位可以设置为百分数。

【译注】

指定圆心即半径后的页面效果如下图所示：

【补图：手动调整剪切圆大小与方位后的页面效果及其在原始尺寸中的位置】

此外，还可以使用 ellipse() 函数来定义一个椭圆形的剪切路径。使用方法与 circle() 函数类似，区别在与椭圆函数需要两个尺寸参数，即垂直方向与水平方向上的半径。根据椭圆剪切出的图片效果如图 14.8 所示。

【图 14.8 剪切路径为椭圆时的图片最终效果】

上述效果对应的 CSS 样式如代码清单 14.11 所示。请将其同步更新到本地样式表。

代码清单 14.11：剪切路径为椭圆时的示例样式代码

.clipped {clip-path: ellipse(300px 170px at 360px 290px); /* 定义一个水平半径 300px、垂直半径 170px 的椭圆 */
}

值得注意的是，与蒙版特效一样，剪切路径的设置并不会改变目标元素的实际大小；特效只是隐藏了元素的某些区域。此时元素仍然占据着页面原始大小，浏览器只是将裁剪遮挡的部分变为了空白。

在绝大多数实际项目开发中，往往需要让剪切图形的尺寸大小贴近目标元素的完整宽高。因此在定义剪辑形状时，通常建议先在图片编辑工具中将图片裁剪到合适的尺寸，然后再设置剪切路径，以便按人们期望的方式来调整形状。

14.3.1 多边形的裁剪路径 Polygon clipping paths

利用多边形函数 polygon() 还可以定义出更复杂的剪切形状。该函数的参数为任意数量的 x、y 坐标组，各组之间用逗号分隔；每一组坐标都对应一个多边形的顶点位置。例如，polygon(50% 0%, 100% 100%, 0% 100%) 就定义了一个三角形，对应的三个顶点坐标分别为顶部正中的（50% 0%）、右下角的（100% 100%）以及左下角的（0% 100%）。

有了这个函数，我们就能根据想要的效果定义出具有任意顶点的多边形。代码清单 14.12 给出了剪切多边形的另一个示例。试根据以下样式代表同步更新本地样式表。

代码清单 14.12 剪切图形为多边形的示例样式代码

.clipped {clip-path: polygon(380px 50px, 650px 210px, 520px 500px, 20px 360px); /* 定义包含四个顶点的多边形 */
}

上述代码的页面效果如图 14.9 所示。该裁剪路径形似一个风筝，并且是横着放置的风筝：

【图 14.9 多边形的图片剪切效果】

如本例所示，利用多边形剪切，我们既可以围绕图片的关键部分重塑图片的可见区域，也可以在指定部位附近雕刻出有趣的边框效果。为此，知名前端大牛 Temani Afif 还专门写了一篇文章演示了不少生动案例，深度探讨了渐变蒙版和剪切路径在构建趣味边框特效中的应用，详见：https://mng.bz/7d0v。

提示

推荐一个非常实用剪切路径在线制作工具：CSS clip-path maker。该工具预设了大量美观实用的剪切图形效果供人们选用。

译注

试了一下这款小工具，确实不错，觉得有必要补个截图：

【补图：线上剪切路径特效生成工具 CSS clip-path maker 主页面截图】

14.3.2 Firefox 内置的剪切路径工具 Firefox clip-path tools

编写剪切路径的代码，尤其是多边形的剪切路径往往会十分繁琐，需要不断调整坐标值才能达到预期效果。为此，Firefox 浏览器的开发者工具 DevTools 提供了一个我认为对与构建或微调剪切路径特效非常有价值的可视化编辑工具。略为遗憾的是，目前其他主流浏览器暂未内置该工具。

在 Firefox 中，右键单击页面上设有剪切路径的图片元素并选择 “检查（Inspect）” 即可打开 DevTools 工具。找到目标元素的 clip-path 属性，会发现其函数旁边有一个多边形图标（如图 14.10 所示）。只要是通过内置函数 circle()、ellipse()、polygon() 以及 inset()（具体用法稍后介绍）定义的任意剪切路径，都会出现该图标。

【图 14.10 点击多边形图标来编辑剪切路径】

点击该多边形图标，将启用主浏览器窗口中的 clip-path 交互式编辑模式。剪切路径的轮廓用蓝色细线勾勒，每一个可以编辑的顶点都会出现一个小圆圈，如图 14.11 所示。点击并拖动其中某个圆圈就能实时编辑图形，并在 DevTools 的 “规则” 面板（Rules pane）中看到当前的变更情况。

【图 14.11 Firefox 浏览器提供的 clip-path 交互式编辑模式效果】

编辑多边形时，每个顶点处都设计了一个控制手柄（control handle）；双击多边形的某条边可以新增一个控制点。编辑圆形时，我们会看到两个控制手柄：一个用于移动圆心位置，另一个则在圆的右侧用于调整半径大小。椭圆的操作与圆类似，只是在底部会多出一个控制点，用于控制椭圆垂直方向上的半径大小。

14.3.3 其他剪切路径类型 Other clip-path types

CSS 还提供了几种其他类型的剪切路径。这些特效的试验工作就交给各位了：

• inset() —— 根据指定的大小，从元素边缘向内剪切，将元素剪切为一个矩形。给定某个参数值，例如 inset(15px)，会从元素的每一条边向内裁剪指定大小。若提供两个、三个或四个参数值，则可以独立控制各边剪切量，用法类似 padding 属性。
• path() —— 根据指定的 SVG 路径命令字符串进行剪切。例如：path("M68,312C17,239 117,63 223,62C328,61 409,276 370,319C330,365 118,384 68,312Z")。SVG 路径语法过于晦涩难懂，难以实现手动编辑；人们往往需要借助矢量编辑软件进行处理，然后将其导出。
• margin-box —— 根据元素的外边距盒进行剪辑。
• border-box —— 根据元素的边框盒进行剪辑。
• padding-box —— 根据元素的内边距盒进行剪辑。
• content-box —— 根据元素的内容盒进行剪辑。

以上剪切路径设置中，最为通用的反倒是 path() 函数，因为该函数在定义复杂图形与曲线方面具备了极为强大的灵活性，远超 polygon() 函数的能力范围。然而，path() 函数的灵活应用离不开矢量编辑软件的相关操作经验。关于 SVG 路径语法的快速入门介绍，可以参考 Chris Coyier 发表的这篇文章：The SVG path Syntax: An Illustrated Guide，详见：https://mng.bz/ma0a。

译注
本以为作者完全放弃了 CSS 浮动样式的介绍，没想到会在下一节中再次邂逅 float 属性。不过这才是 float 属性的正确打开方式。等消化完本节内容后，让我们稍事休整，一起来看看新版本会怎么定位 float 这一古老的 CSS 话题。

---

---

关于《CSS in Depth》（中译本书名《深入解析 CSS》）

	第 1 版	第 2 版
读者评分	原版：4.7（亚马逊）；中文版：9.3（豆瓣）	原版：5.0（亚马逊）；中文版：暂无，待出版
出版时间	原版：2018 年 3 月；中文版：2020 年 4 月	原版：2024 年 7 月；中文版：暂无，待出版
原价	原版：$44.99；中文版：￥139.00	原版：$59.99；中文版：暂无，待出版
现价	原版：$36.49；中文版：￥52.54 起步	原版：$52.09；中文版：暂无，待出版
原版国内预订	起步价 ￥461.00	起步价 ￥750.00

本专栏为该书第 2 版高分译文专栏，全网首发，精译精校，持续更新，计划今年内完成全书翻译，敬请期待！！！

目前已完结的章节（可进入本专栏查看详情，连载期间完全免费）：

• 第一章 层叠、优先级与继承（已完结）
  • 1.1 层叠
  • 1.2 继承
  • 1.3 特殊值
  • 1.4 简写属性
  • 1.5 CSS 渐进式增强技术
  • 1.6 本章小结
• 第二章 相对单位（已完结）
  • 2.1 相对单位的威力
  • 2.2 em 与 rem
  • 2.3 告别像素思维
  • 2.4 视口的相对单位
  • 2.5 无单位的数值与行高
  • 2.6 自定义属性
  • 2.7 本章小结
• 第三章 文档流与盒模型（已完结）
  • 3.1 常规文档流
  • 3.2 盒模型
  • 3.3 元素的高度
  • 3.4 负的外边距
  • 3.5 外边距折叠
  • 3.6 容器内的元素间距问题
  • 3.7 本章小结
• 第四章 Flexbox 布局（已完结）
  • 4.1 Flexbox 布局原理
  • 4.2 弹性子元素的大小
  • 4.3 弹性布局的方向
  • 4.4 对齐、间距等细节处
  • 4.5 本章小结
• 第五章 网格布局（已完结）
  • 5.1 构建基础网格
  • 5.2 网格结构剖析 （上）
    • 5.2.1 网格线的编号（下）
    • 5.2.2 网格与 Flexbox 配合（下）
  • 5.3 两种替代语法
    • 5.3.1 命名网格线
    • 5.3.2 命名网格区域
  • 5.4 显式网格与隐式网格（上）
    • 5.4.1 添加变化 （中）
    • 5.4.2 让网格元素填满网格轨道（下）
  • 5.5 子网格（全新增补内容）
  • 5.6 对齐相关的属性
  • 5.7 本章小结
• 第六章 定位与堆叠上下文（已完结）
  • 6.1 固定定位
    • 6.1.1 创建一个固定定位的模态对话框
    • 6.1.2 在模态对话框打开时防止屏幕滚动
    • 6.1.3 控制定位元素的大小
  • 6.2 绝对定位
    • 6.2.1 关闭按钮的绝对定位
    • 6.2.2 伪元素的定位问题
  • 6.3 相对定位
    • 6.3.1 创建下拉菜单（上）
    • 6.3.2 创建 CSS 三角形（下）
  • 6.4 堆叠上下文与 z-index
    • 6.4.1 理解渲染过程与堆叠顺序（上）
    • 6.4.2 用 z-index 控制堆叠顺序（上）
    • 6.4.3 深入理解堆叠上下文（下）
  • 6.5 粘性定位
  • 6.6 本章小结
• 第七章 响应式设计（已完结）
  • 7.1 移动端优先设计原则（上篇）
    • 7.1.1 创建移动端菜单（下篇）
    • 7.1.2 给视口添加 meta 标签（下篇）
  • 7.2 媒体查询（上篇）
    • 7.2.1 深入理解媒体查询的类型（上篇）
    • 7.2.2 页面断点的添加（中篇）
    • 7.2.3 响应式列的添加（下篇）
  • 7.3 流式布局
  • 7.4 响应式图片
  • 7.5 本章小结
• 第八章 层叠图层及其嵌套
  • 8.1 用 layer 图层来操控层叠规则（上篇）
    • 8.1.1 图层的定义（上篇）
    • 8.1.2 图层的顺序与优先级（下篇）
    • 8.1.3 revert-layer 关键字（下篇）
  • 8.2 层叠图层的推荐组织方案
  • 8.3 伪类 :is() 和 :where() 的用法
  • 8.4 CSS 嵌套的使用
    • 8.4.1 嵌套选择器的使用
    • 8.4.2 深入理解嵌套选择器
    • 8.4.3 媒体查询及其他 @规则 的嵌套
  • 8.5 本章小结
• 第九章 CSS 的模块化与作用域
  • 9.1 模块的定义
    • 9.1.1 模块和全局样式
    • 9.1.2 一个简单的 CSS 模块
    • 9.1.3 模块的变体
    • 9.1.4 多元素模块
  • 9.2 将模块组合为更大的结构
    • 9.2.1 模块中多个职责的拆分
    • 9.2.2 模块的命名
  • 9.3 CSS 的作用域
    • 9.3.1 CSS 作用域的就近原则
    • 9.3.2 划定作用域的边界
    • 9.3.3 CSS 中的隐式作用域
    • 9.3.4 关于 CSS 作用域与层叠图层
  • 9.4 CSS 模式库
  • 9.5 本章小结
• 第十章 CSS 容器查询
  • 10.1 容器查询的一个简单示例
    • 10.1.1 容器尺寸查询的用法
  • 10.2 深入理解容器
    • 10.2.1 容器的类型
    • 10.2.2 容器的名称
    • 10.2.3 容器与模块化 CSS
  • 10.3 与容器相关的单位
  • 10.4 容器样式查询的用法
    • 10.4.1 将模块与所在容器解耦
    • 10.4.2 减少重复代码
  • 10.5 本章小结
• 第 11 章 颜色与对比
  • 11.1 通过对比进行交流
    • 11.1.1 模式的建立
    • 11.1.2 还原设计稿
  • 11.2 颜色的定义
    • 11.2.1 色域与色彩空间
    • 11.2.2 CSS 颜色表示法（RGB、Hex、HSL、HWB、LAB/OKLAB、LCH/OKLCH）
  • 11.3 利用 OKLCH 处理颜色（上篇）
    • 11.3.4 从页面其他颜色衍生出新颜色（下篇）
  • 11.4 思考字体颜色的对比效果
  • 11.5 本章小结
• 第 12 章 CSS 排版与间距
  • 12.1 间距设置
    • 12.1.1 使用 em 还是 px
    • 12.1.2 对行高的深入思考
    • 12.1.3 行内元素的间距设置
  • 12.2 Web 字体
  • 12.3 谷歌字体
  • 12.4 @font-face 的工作原理
    • 12.4.1 字体格式与回退处理
    • 12.4.2 同一字型的多种变体形式
  • 12.5 性能因素考量
    • 12.5.1 font-display 属性解析
    • 12.5.2 可变字体的用法
  • 12.6 调整字间距，提升可读性
    • 12.6.1 正文的字间距
    • 12.6.2 标题、小元素和间距
  • 12.7 本章小结
• 第 13 章 渐变、阴影与混合模式
  • 13.1 渐变
    • 13.1.1 使用多个颜色节点（上）
    • 13.1.2 颜色插值方法（中）
    • 13.1.3 径向渐变（下）
    • 13.1.4 锥形渐变（下）
  • 13.2 阴影
    • 13.2.1 利用渐变和阴影打造立体感
    • 13.2.2 使用扁平化设计创建元素
    • 13.2.3 创建混合风格的按钮外观
  • 13.3 混合模式
    • 13.3.1 为图片上色
    • 13.3.2 混合模式的类型
    • 13.3.3 图片纹理的添加
    • 13.3.4 融合混合模式的用法
  • 13.4 本章小结
• 附录
  • 附录A：CSS 选择器参考
  • 附录B：CSS 预处理器简介