App 图标圆角适配
Android 开发者在给应用做 Material Design 3 适配时，发现系统对不同品牌手机（小米、OPPO、三星）的图标圆角要求不一致，有的是 12dp，有的是 16dp。用本工具分别设置左上、右上、右下、左下四个角的半径，能精确模拟各厂商的圆角裁剪规则，导出前直接预览 1:1 效果，避免了反复打包安装测试的麻烦。
圆 角Four Corners · uniform
左上角 top-left
px
px
右上角 top-right
px
px
左下角 bottom-left
px
px
右下角 bottom-right
px
px
预 设Gallery · 一键套用
元 素Preview Box
底色 fill
宽 width
220px
高 height
220px
border-radius
拖动手柄改圆角
就绪 · 拖手柄实时生成 border-radius · 全程浏览器本地处理
第一节
关于本工具
About设计师在 Figma 里调圆角时，经常想单独让左下角更圆、右上角保留直角，但 CSS 的 border-radius 缩写总让人算不清顺序。这个工具把八个角（四个主半径加四个椭圆半径）拆成独立输入框，直接拖拽滑块或填数值，实时预览圆角变化。代码在浏览器内生成，不经过服务器，调完直接复制 CSS 属性走。
使用场景
电商主图圆角模板
淘宝美工每月要出 200 张主图，平台要求图片四角统一为 8px 圆角。但遇到「买一送一」标签贴在右下角时，需要单独把右下角设为 0px 直角，让标签贴合产品边缘。本工具支持八个角独立调节，做好一个模板后直接复制参数给其他 SKU，不用每张图进 PS 手动拉圆角路径。
名片圆角与折角设计
设计师接到一家摄影工作室的名片需求：左上和右下用 6mm 圆角，模拟被翻卷的质感；右上和左下保持直角，方便对齐名片夹。在 AI 里手动调贝塞尔曲线要反复试错，用本工具直接输入数值，实时看四个角的不同弧度对比，确认后截图给印刷厂，省去了「调-导出-看-再调」的循环。
椭圆按钮悬停动效
前端开发者在写一个「立即预约」按钮时，要求默认是 20px 圆角，鼠标悬停时变成椭圆（水平半径 40px、垂直半径 20px）。用本工具分别输入 X 轴和 Y 轴的半径值，能直观看到椭圆弧度的变化曲线，把数值直接复制到 CSS 的 border-radius 属性里，不用在浏览器调试面板里盲猜。
卡片式 UI 的异形角
产品经理给一个会员卡页面提了需求：卡片左上和右上圆角 16px，左下和右下圆角 4px，模拟真实钱包里卡片被磨损的底部边缘。用本工具一次性设置四个角的独立值，截图给视觉评审确认，比在 Sketch 里用四个不同矩形布尔运算拼接快了三倍，且参数可复用到其他页面。
第二节
使用指南
Getting Started使用步骤
- 1在四个角输入框中分别键入圆角半径值（如 10px），四个角的预览区域同步更新形状
- 2勾选「椭圆」开关后，每个角出现两个输入框（水平/垂直半径），分别输入不同值，预览区显示椭圆角效果
- 3点击预览区域任意位置，弹出代码面板，显示当前圆角设置的 CSS 代码（border-radius 属性）
- 4点击代码面板中的「复制」按钮，CSS 代码自动写入剪贴板，面板短暂闪烁提示已复制
输入输出示例
| 输入 | 输出 | 说明 |
|---|---|---|
| 左上:10px 右上:10px 左下:10px 右下:10px | border-radius: 10px 10px 10px 10px; | 常规：四角统一圆角，验证基础简写输出正确性 |
| 左上:0px 右上:0px 左下:0px 右下:0px | border-radius: 0px 0px 0px 0px; | 边界：全部为0，验证零值处理（应输出有效CSS而非空） |
| 左上:50% 右上:50% 左下:50% 右下:50% | border-radius: 50% 50% 50% 50%; | 常规：百分比值，验证百分比单位支持（常用作圆形） |
| 左上:9999px 右上:9999px 左下:9999px 右下:9999px | border-radius: 9999px 9999px 9999px 9999px; | 边界：超大像素值，验证无上限截断（实际渲染会按元素尺寸裁剪） |
| 左上:10px 20px 右上:30px 40px 左下:50px 60px 右下:70px 80px | border-radius: 10px 20px 30px 40px 50px 60px 70px 80px; | 易错：椭圆角（每角两个值），验证8值格式输出是否按顺序排列 |
| 左上:10px 右上:10px 左下:10px 右下:10px（勾选「独立控制」） | border-radius: 10px 10px 10px 10px; | 常规：独立控制模式下的四角一致，验证独立模式与简写模式输出无差异 |
| 左上:0 右上:0 左下:0 右下:0（不写单位） | border-radius: 0 0 0 0; | 易错：省略单位时输出是否自动补全（本工具不补，需用户自行添加） |
常见错误对照
1.只设一个值，其余角被意外归零
✗ 错误
border-radius: 20px;✓ 修复
border-radius: 20px 20px 20px 20px;CSS 缩写语法中，单值写法会将四个角设为相同值；但本工具按角独立输出，若只填一个角，其他角输出 0，导致圆角效果丢失。
2.椭圆半径写成两个相同值，丢失椭圆效果
✗ 错误
border-radius: 50px 50px / 50px 50px;✓ 修复
border-radius: 50px 20px / 30px 40px;椭圆半径必须水平/垂直值不同；斜杠后是垂直半径，若与水平相同则退化为正圆。
3.百分比值超出 100%，浏览器裁剪行为不一致
✗ 错误
border-radius: 150%;✓ 修复
border-radius: 50%;CSS 规范规定 border-radius 百分比基于元素尺寸计算，超过 100% 时各浏览器裁剪逻辑不同（Chrome 截断为 50%，Firefox 可能拉伸）。
4.负值被忽略，圆角失效
✗ 错误
border-radius: -10px;✓ 修复
border-radius: 10px;CSS 属性 border-radius 不接受负值，无效声明会被浏览器完全忽略，元素恢复直角。
5.单位缺失，整条声明无效
✗ 错误
border-radius: 20;✓ 修复
border-radius: 20px;CSS 长度值必须带单位（px、em、% 等），无单位数值会被解析器视为语法错误，整条规则被丢弃。
6.百分比用于椭圆半径时，水平/垂直基准不同
✗ 错误
border-radius: 50% / 50%;✓ 修复
border-radius: 50% / 25%;椭圆半径的百分比：水平值基于元素宽度，垂直值基于元素高度。若元素宽高比不是 1:1，50%/50% 会得到椭圆而非正圆。
7.逗号分隔写错位置，导致解析失败
✗ 错误
border-radius: 10px, 20px;✓ 修复
border-radius: 10px 20px;border-radius 属性值之间用空格分隔，而非逗号。逗号是 CSS 函数参数分隔符，此处使用会导致整个声明无效。
第三节
工作原理
How It Works核心公式
border-radius: t-l-x t-r-x b-r-x b-l-x / t-l-y t-r-y b-r-y b-l-y
变量说明
t-l-x左上角水平半径，单位 pxt-r-x右上角水平半径，单位 pxb-r-x右下角水平半径，单位 pxb-l-x左下角水平半径，单位 pxt-l-y左上角垂直半径，单位 pxt-r-y右上角垂直半径，单位 pxb-r-y右下角垂直半径，单位 pxb-l-y左下角垂直半径，单位 px
示例
设置一个 200×100 的矩形，左上角水平 40px、垂直 20px，右上角水平 30px、垂直 15px，右下角水平 20px、垂直 10px，左下角水平 10px、垂直 5px。CSS 值为：border-radius: 40px 30px 20px 10px / 20px 15px 10px 5px。渲染后四个角呈现不同椭圆弧度，左上角最圆（40×20），右下角最平（20×10）。
用户输入
本地处理
输出结果
第五节
常见问题
Q & A问我想让四个角圆角不一样，这个工具能单独调每个角吗？＋
答
可以。本工具支持 8 个角分别控制，每个角对应一个输入框（左上、右上、左下、右下），输入不同数值就能生成不对称圆角。如果只填一个框，其他角默认跟随第一个值。注意数值单位是像素（px），不支持百分比或 em，浏览器渲染圆角时百分比参照的是元素宽高，这里统一用 px 更直观。
问椭圆圆角是啥意思？怎么我设了 50px 出来是椭圆？＋
答
椭圆圆角指水平半径和垂直半径不一样，比如水平 50px、垂直 20px，角就会拉成椭圆弧。本工具每个角有两个输入框（x 半径和 y 半径），默认只填一个时两个值相同就是正圆。要椭圆就在第二个框填不同值。如果只看到一个输入框，检查页面是否有“椭圆”开关或展开按钮，需要手动打开双半径模式。
问我调好了代码，但复制到我的网页里圆角没生效，怎么回事？＋
答
最常见原因：1）CSS 属性拼写错误，本工具生成的是 border-radius 简写，检查是否漏了冒号或分号；2）元素本身是内联元素（如 span），内联元素默认不应用圆角，需要加 display: inline-block 或 block；3）圆角值太大，超过了元素宽高的一半，浏览器会按比例缩小。建议先设一个 10px 测试，确认生效再调大。
问这个工具生成的代码是所有浏览器都兼容吗？＋
答
本工具输出标准的 border-radius 属性，所有现代浏览器（Chrome、Firefox、Safari、Edge）都支持，无需加 -webkit- 前缀。但 IE 9 以下不支持，如果还要兼容老 IE，需要额外写 -ms-border-radius。另外椭圆圆角（两个值）在部分旧版移动浏览器上有渲染差异，建议用 Chrome 或 Safari 最新版测试。
问为什么我调出来的圆角在手机上看着比电脑上大？＋
答
圆角值用固定 px，在不同屏幕密度下物理尺寸不变，但视觉比例会随元素大小变化。如果网页响应式设计让元素在手机上变宽，同样 20px 圆角看起来就相对更小；反之元素变小，圆角视觉占比就变大。建议用百分比或 rem 单位代替 px，但本工具只输出 px，复制后需要手动改单位。
问这个工具需要上传图片或联网才能用吗？＋
答
完全不需要。本工具是纯前端实现，所有计算和代码生成都在浏览器本地完成，不会上传任何数据到服务器。断网也能正常使用，刷新页面也不会丢失已填的数值（只要不关闭标签页）。如果担心隐私问题，可以放心使用。
问我想让四个角分别不同，但只想调两个角，剩下两个保持默认 0 怎么办？＋
答
在输入框中，没填的角默认值是 0px。所以如果只填左上和右上，左下和右下自动为 0。注意不要留空不填，最好显式填 0，否则部分浏览器可能解析为无效值。建议四个角都填一下，哪怕 0px 也写上，这样复制出来的 CSS 更完整。
问这个工具和那些拖拽滑块调圆角的工具有啥区别？＋
答
本工具是纯数值输入，适合需要精确控制的设计场景（比如 UI 规范要求左上 8px、右下 12px）。拖拽滑块工具更适合快速预览效果，但难以精确到 1px。另外本工具支持椭圆圆角（双半径），很多滑块工具只支持正圆。如果只是随便调调，滑块更方便；如果做设计稿还原，本工具更准确。
隐私保证所有计算与处理均在你的浏览器本地完成，输入数据不会上传服务器，也不会保存或共享。