快速上手

  1. 访问 HeronTool 的 Clip-Path Generator（clip-path 生成器）页面。
  2. 在画布上选择一个预设形状（如圆形、多边形或自定义路径），或通过拖动控制点直接绘制。
  3. 调整右侧参数面板中的坐标值，微调形状的每个顶点。
  4. 实时预览效果，满意后点击“复制CSS”按钮，代码将自动生成并复制到剪贴板。

应用技巧

  • 响应式设计：使用百分比单位（如 50%）代替像素，确保形状在不同屏幕下自适应。
  • 动画结合：将生成的 clip-path 值放入CSS过渡或关键帧中，实现平滑的形状变化。
  • 遮罩与背景：将裁剪路径应用于图片容器，可制作圆形头像、异形卡片等视觉效果。

常见问题 (FAQ)

Q: 如何恢复默认形状？
A: 点击生成器上的“重置”按钮，所有点将回到初始位置。

Q: 可以导出SVG路径吗？
A: 目前支持直接输出CSS clip-path 语法，如需SVG可手动转换。

Q: 浏览器兼容性如何？
A: 现代浏览器均支持，建议添加 -webkit- 前缀以兼容旧版Safari。