【浏览器执行模式】 : 您的所有数据均在浏览器中处理,不会上传服务器,数据安全有保障。不放心的,可等待页面加载完成后 断网使用!(需提前登录账号)
【速度及稳定性】 : 处理速度由您的机器配置决定。由于浏览器差异,少数工具可能出现无法使用或异常:请使用:软件版工具
工具使用
返回旧版工具
先设置裁剪路径,再复制代码或批量处理图片
选择预设形状后可拖拽多边形控制点,也可以切换圆形、椭圆、内嵌矩形并调整参数。批量处理会使用当前路径,上传多张图片时仅展示前20张,实际会全部处理。
当前路径信息
类型polygon
控制点3
提示:先完成路径设置,再复制代码或处理图片。
实时预览
多边形模式下可拖拽蓝色控制点,坐标会同步生成CSS。
坐标:相对于元素自身,左上角为 0% 0%。
polygon(50% 0%, 100% 100%, 0% 100%)
形状与预设
先选类型,再调参数
路径参数
数值支持百分比
预览与输出
背景只影响预览和图片导出
生成代码
代码会随设置实时更新。
批量应用当前路径
请先在上一步设置好路径,再选择图片处理。
点击或拖入图片
支持 JPG、PNG、WebP、GIF、BMP 等常见格式
尚未选择图片。
输出设置
PNG支持透明背景
等待处理。
图片预览与结果
上传后显示前20张,处理时会包含全部文件。
待处理图片0张
请选择图片后查看缩略图。
处理结果0张
处理完成后显示结果缩略图。
使用说明
软件使用说明
- 设计裁剪路径:进入工具后先在“设计路径”步骤选择形状类型,可使用多边形、圆形、椭圆或内嵌矩形。
- 选择预设形状:可从基础图形、箭头与标识、装饰图形中选择预设,再按需要调整参数。
- 编辑路径参数:多边形可拖拽控制点,也可在坐标文本框中输入百分比坐标;圆形、椭圆和内嵌矩形可直接填写半径、中心点、边距和圆角。
- 设置预览效果:可调整预览宽高、渐变颜色、渐变角度,也可以选择图片作为预览内容。
- 复制CSS代码:确认效果后点击“复制clip-path”或“复制CSS”,可选择是否包含-webkit前缀和类选择器。
- 批量处理图片:点击“下一步:批量处理”,选择多张图片,设置输出格式、质量和尺寸模式后开始处理。
- 下载结果:处理完成后点击“下载全部结果ZIP”,输出文件会尽量沿用原文件名,遇到重名会自动添加数字区分。
常见问题
答:clip-path用于把元素裁剪成指定形状,常用于图片异形展示、卡片边缘设计、按钮造型、网页装饰图形和交互动效。
答:polygon通过多个坐标点生成多边形;circle生成圆形裁剪区域;ellipse生成椭圆裁剪区域;inset生成内嵌矩形,并支持圆角参数。
答:坐标使用百分比表示,例如50% 0%代表元素顶部中间位置,100% 100%代表右下角。每个点之间用逗号分隔,至少需要3个点。
答:-webkit-clip-path用于兼容部分WebKit内核环境。为了提升适配范围,可以同时保留带前缀和标准写法。
答:可选择常见图片格式作为输入,输出支持PNG、JPEG和WebP。PNG适合保留透明区域,JPEG适合生成较小文件,WebP适合兼顾体积和画质。
答:工具会尽量沿用原文件名,并根据输出格式替换扩展名。如果存在重名文件,会在文件名后添加数字,避免结果互相覆盖。