什么是 CSS Clip Path 制作工具？
CSS Clip Path 制作工具是一个用于创建 CSS clip-path 形状的可视化编辑器。您无需手动编写 clip-path 值，只需在交互式画布上拖动手柄来设计形状，然后复制生成的 CSS 代码。
为什么使用可视化 Clip-Path 编辑器？
CSS clip-path 属性功能强大但手动编写具有挑战性。多边形形状需要精确的坐标对，即使很小的改动也需要重新计算多个值。可视化编辑器通过以下方式解决了这个问题：
即时可视化反馈
拖动手柄，在画布上实时观看形状更新。
精确控制
使用网格叠加层和数值输入，以 0.1% 的精度进行精确定位。
28 个现成预设
从星形、箭头、盾牌等中选择 — 然后根据需要自定义。
导入现有代码
粘贴您当前的 clip-path CSS 以直观编辑并进一步优化。
支持的形状类型
多边形
圆形
椭圆
内缩
这是为谁准备的？
- 前端开发者使用非矩形形状构建自定义 UI 组件
- 网页设计师创建英雄部分、图像遮罩和装饰元素
- CSS 学习者通过可视化反馈探索 clip-path 值的工作原理
如何使用 CSS Clip Path 制作工具
创建 clip-path 形状只需几个步骤。按照本指南掌握可视化编辑器：
选择形状类型
点击编辑器顶部的四个形状选项卡之一：
- 多边形 - 用于具有多个点的自定义形状（默认）
- 圆形 - 用于圆形裁剪
- 椭圆 - 用于椭圆形
- 内缩 - 用于从边缘向内的矩形裁剪
或浏览预设部分，从现成的形状（如星形、箭头或盾牌）开始。
编辑形状
每种形状类型都有自己的编辑控制：
多边形编辑
- 拖动画布上的手柄以移动点
- 点击边缘在现有点之间添加新点
- 双击手柄删除点（最少需要 3 个点）
- 使用左侧的点列表输入精确的 X/Y 值
圆形和椭圆编辑
- 拖动中心手柄重新定位形状
- 拖动半径手柄调整大小
- 使用滑块精确控制半径和中心位置
内缩编辑
- 拖动边缘手柄调整从每一侧裁剪的数量
- 启用全部锁定同时更改所有四个边
- 调整边框圆角使内缩矩形的角变圆
使用画布选项
- 外部区域 - 切换 clip-path 外部区域的可见性（显示为暗淡的叠加层）
- 网格 - 显示 10×10 网格叠加层用于对齐
- 背景 - 更改画布颜色或上传图像以在真实内容上预览您的 clip-path
复制 CSS
生成的 CSS 代码显示在右侧的输出面板中。点击复制 CSS 将其复制到剪贴板，然后粘贴到您的样式表中。
键盘快捷键
| 快捷键 | 操作 |
|---|---|
| Ctrl + Z / Cmd + Z | 撤销上一次更改 |
| Ctrl + Y / Cmd + Shift + Z | 重做上一次撤销的更改 |
| 方向键 | 将选中的多边形点微调 1% |
| Shift + 方向键 | 将选中的多边形点微调 5% |
| Delete / Backspace | 删除选中的多边形点 |
功能
交互式可视化编辑器
画布实时显示您的 clip-path 形状。拖动手柄修改形状，CSS 代码会立即更新。画布使用 4:3 的宽高比，采用基于百分比的坐标以实现精确定位。
全面的形状支持
所有四个 CSS clip-path 形状函数都得到完全支持，具有专用的编辑界面：
多边形
圆形
椭圆
内缩
28 个内置预设
从 6 个类别中的 28 个预设形状中的任何一个开始，以加快您的工作流程：
基本形状
三角形、梯形、菱形和其他基本几何形状。
正多边形
五边形、六边形、七边形和八边形，具有完美对称的边。
星形
4 点、5 点、6 点星形，加上十字和 X 形用于装饰元素。
箭头
4 个方向的方向箭头（上、下、左、右）加上 V 形变体。
复杂形状
消息气泡、斜面、凹口、盾牌和其他高级几何设计。
圆形/椭圆/内缩变体
预配置的圆形、椭圆和内缩形状，具有常见配置。
精确点编辑
对于多边形形状，每个点都可以通过点列表面板进行数值编辑。每个点显示其 X 和 Y 坐标，精度为 0.1%。通过点击其行选择一个点，然后使用输入字段或方向键进行微调。
智能点管理
点击边缘
- 点击多边形边缘附近的任何位置
- 在最近的顶点之间插入新点
- 必须在边的约 5% 范围内才能注册
多种方法
- 在画布上双击手柄
- 选择点并按 Delete/Backspace
- 点击点列表中的删除按钮 (×)
- 强制执行最少 3 个点
内缩锁定功能
使用内缩形状时，启用"全部锁定"同时更改所有四个边。当您想要从所有边进行统一裁剪时，这很有用。边框圆角滑块为内缩矩形添加圆角。
/* Uniform 10% inset with 20% corner radius */
clip-path: inset(10% round 20%);撤销/重做历史记录
每个形状更改都记录在历史堆栈中（最多 50 个状态）。使用撤销/重做按钮或键盘快捷键在编辑历史中逐步进行，而不会丢失您的工作。
CSS 导入
已经有 clip-path 值了？点击"导入"并粘贴您的 CSS 代码。该工具解析多边形、圆形、椭圆和内缩值，并将其加载到可视化编辑器中以进行进一步编辑。
clip-path: 前缀的值 — 只需粘贴该值并点击应用。画布辅助工具
两个叠加层选项可帮助您更有效地工作：
外部区域叠加层
一个暗淡的叠加层，显示 clip-path 外部的区域，清楚地表明什么将可见，什么将被裁剪。
10×10 网格
一个基于百分比的网格，用于精确对齐和对称定位点。
自定义背景
通过更改画布颜色或上传图像来在不同背景上预览您的 clip-path。这有助于在实现设计之前可视化形状在实际内容上的外观。
- 用于简单背景的纯色选择器
- 用于逼真内容预览的图像上传
- 无需丢失形状即可即时切换背景
常见问题
什么是 CSS clip-path？
CSS clip-path 属性为元素定义裁剪区域。只有裁剪形状内部的部分可见；外部的所有内容都被隐藏。它通常用于创建非矩形布局、图像遮罩和装饰性 UI 元素。
哪些浏览器支持 clip-path？
具有基本形状（多边形、圆形、椭圆、内缩）的 clip-path 属性在所有现代浏览器中都受支持，包括 Chrome、Firefox、Safari 和 Edge。对于较旧的浏览器，请考虑提供备用方案或使用 polyfill。
如何向多边形添加点？
在画布上的多边形边缘附近点击任何位置。新点将在两个最近的现有点之间插入。点击必须在边的约 5% 范围内才能注册。
如何删除多边形点？
您有三个选项：
- 在画布上双击手柄
- 选择点并按 Delete 或 Backspace
- 点击点列表中的删除按钮 (×)
我可以导入现有的 clip-path CSS 吗？
可以。点击 CSS 输出下方的"导入"按钮，粘贴您的 clip-path 值（带或不带 clip-path: 前缀），然后点击"应用"。该工具支持所有四种形状类型：多边形、圆形、椭圆和内缩。
圆形和椭圆有什么区别？
单一半径
- 一个半径值
- 始终完美圆形
- 宽度和高度相等
两个独立半径
- 独立的 X 和 Y 半径
- 创建椭圆形
- 可以更宽或更高
内缩中的"round"值有什么作用？
inset() 中的"round"参数为裁剪矩形添加边框圆角。例如：
/* 10% inset from all edges with 20% corner radius */
clip-path: inset(10% round 20%);为什么我无法删除多边形点？
多边形需要至少 3 个点才能成为有效的形状。如果您只剩下 3 个点，删除控制将被禁用，以防止创建无效的多边形。
坐标的精度如何？
所有坐标使用百分比值，精度为 0.1%（一位小数）。这为大多数用例提供了足够的精度，同时保持 CSS 输出的清洁和可读性。
我可以使用背景图像进行预览吗？
可以。点击画布设置区域中颜色选择器旁边的上传按钮。选择一个图像文件，它将显示为画布背景，让您预览 clip-path 形状在真实内容上的外观。
我的形状在会话之间是否被保存？
否，形状不会在页面加载之间持久化。在离开页面之前，请确保复制您的 CSS 代码。您也可以在外部保存您的 clip-path 值，并稍后使用导入功能导入它们。
我的数据是否被发送到任何服务器？
否。所有形状编辑和 CSS 生成都完全在您的浏览器中进行。不会上传或传输任何数据到任何服务器，包括您加载的任何背景图像。
还没有评论，快来发表第一条！