这个工具是什么
Border Radius Generator 按左上、右上、右下、左下的顺序控制圆角。Link Corners 开启时，修改任意一个角会同步其他三个角，适合快速设置统一圆角。
如何使用
- 选择圆角单位并输入四个角的非负数值。
- 需要统一圆角时，开启 Link Corners。
- 观察预览盒子的形状变化。
- 复制 CSS，或重置参数后尝试不同形状。
使用示例
- 10、20、30、40px 表示四个独立圆角。
- 四角均为 20px，可输出 border-radius: 20px。
- 左上与右下为 10px、右上与左下为 20px，可简写为 10px 20px。
border-radius: 10px 20px 30px 40px;
border-radius: 20px;原理与 CSS 说明
四值 border-radius 按顺时针从左上角开始。四值相同可缩成一个值；对角相等可缩成两个值，其他满足条件的组合也可使用 CSS 简写。过大的圆角由浏览器按 CSS 规则调整到可绘制范围。
常见用途
- 设置卡片与按钮的统一圆角。
- 制作不对称角的装饰容器。
- 理解 border-radius 的顺序与简写规则。
隐私说明
所有输入、计算、CSS 生成和预览都在当前浏览器中完成，不会上传用户内容，不使用后台、数据库、在线 API 或第三方 CDN，也不会自动保存您的输入。
FAQ
四个角的顺序是什么？
依次是左上、右上、右下、左下，沿顺时针方向排列。
Link Corners 有什么作用？
开启后，修改任意一个角会将该数值同步到其他三个角。
为什么输出有时只有一个或两个值？
相同的角值可按标准 CSS 简写，较短的输出与完整四值写法效果一致。
为什么很大的半径没有完全按数值显示？
当相邻圆角之和超过盒子尺寸时，浏览器会按 CSS 规则整体缩放圆角，避免重叠。