CSS裁剪生成器 - 小齐科技谷在线工具

当前位置:在线工具 ❯ CSS裁剪生成器

CSS裁剪生成器

填充颜色：

形状类型

圆形

椭圆

多边形

内嵌

参数调整

半径 Radius 50%

中心 X 50%

中心 Y 50%

半径 X 50%

半径 Y 40%

中心 X 50%

中心 Y 50%

上 Top 10%

右 Right 10%

下 Bottom 10%

左 Left 10%

圆角 Radius 0%

预设形状

CSS 代码

工具简介：

CSS Clip-path 生成器是一款可视化裁剪路径工具，帮助开发者快速创建各种形状的 CSS clip-path 属性值。
支持 circle（圆形）、ellipse（椭圆）、polygon（多边形）、inset（内嵌矩形）四种裁剪函数。
多边形模式支持拖拽顶点，实时调整形状，所见即所得。
内置多种常用预设形状，一键应用，快速上手。

使用方式：

在"选择形状类型"区域点击选项卡，选择需要的裁剪函数类型。
在"参数调整"面板中拖动滑块或输入数值，实时调整裁剪参数。
多边形模式下，可直接在预览区拖拽顶点调整位置，也可手动输入坐标。
点击预设形状卡片可快速加载常用形状。
在"CSS 代码"区域查看生成的代码，点击"复制代码"按钮即可复制到剪贴板。
可切换预览区背景（浅色/深色/图片），选择填充颜色，方便查看裁剪效果。

注意事项：

clip-path 属性在 IE 浏览器中不支持，请确认目标浏览器兼容性。
多边形顶点最少需要3个，最多建议不超过20个以保证性能。
inset 的圆角参数使用 round 关键字，部分旧版浏览器可能不支持。
拖拽顶点时请确保鼠标/触摸在预览区域内操作。
复制代码后请根据实际项目需求调整选择器和尺寸。