在线圆角生成器本质是将四个角数值实时转为合法border-radius值并预览，需用空格分隔、显式单位（如10px），避免逗号或缺单位；input事件实现即时响应，%单位受元素自身宽高影响易失真，导出时需注意overflow:hidden及旧版兼容性。
用 CSS border-radius 手动写圆角值太慢？别硬调，直接算
在线圆角生成器本质就是把四个角的数值（top-left、top-right、bottom-right、bottom-left）实时转成合法的 border-radius 值，并预览效果。你不需要依赖外部工具——用一个带 input 的 div 就能本地跑起来。
关键不是“生成器”这个概念，而是怎么让四个数值输入框和样式更新联动。常见错误是直接拼字符串塞进 style，结果忘了单位（px 或 %）或语法格式（比如写成 border-radius: 10, 20, 30, 40; 就会失效）。
- 必须用空格分隔，不能用逗号：
border-radius: 10px 20px 30px 40px - 如果只填一个值，四角等效：
border-radius: 12px - 支持简写：两个值表示上下/左右，三个值表示上/左右/下，四个值才对应 TL-TR-BR-BL
- 单位必须显式写出，
0可不带单位，但10不加px会无效
HTML + JS 实时绑定 border-radius 的最小可行代码
下面这段可以直接保存为 round-gen.html 双击运行，不依赖网络或框架：
<div style="margin: 20px">
<label>TL: <input type="number" id="tl" value="8"></label>
<label>TR: <input type="number" id="tr" value="12"></label>
<label>BR: <input type="number" id="br" value="6"></label>
<label>BL: <input type="number" id="bl" value="16"></label>
</div>
<div id="preview" style="width:200px; height:120px; background:#4a90e2; margin:20px"></div>
<script>
const inputs = ['tl', 'tr', 'br', 'bl'];
const preview = document.getElementById('preview');
function updateRadius() {
const values = inputs.map(id => {
const v = document.getElementById(id).value;
return v === '' ? '0' : v + 'px'; // 空值默认为 0px
});
preview.style.borderRadius = values.join(' ');
}
inputs.forEach(id => {
document.getElementById(id).addEventListener('input', updateRadius);
});
</script>
注意：这里用 input 事件而非 change，才能实现拖动滑块或键盘输入时实时响应；value 是字符串，必须手动加 px，否则浏览器当作无效值忽略。
立即学习“前端免费学习笔记（深入）”；
为什么用 % 单位时预览容易“失真”
当输入框填的是百分比（如 25%），border-radius 的计算基准是元素自身的宽高 —— 而不是父容器。这意味着同一个 25% 在不同尺寸的预览框里，圆角弧度完全不同。
- 如果预览区是正方形，
border-radius: 50%就是完美圆形 - 如果预览区是长条形（比如
width: 300px; height: 40px），50%就变成150px 150px 20px 20px，左右撑开、上下压扁 - 多数在线工具默认用
px，因为可控；切记不要混用单位，border-radius: 10px 20% 30px 40%合法但极难预测效果
导出 CSS 代码时最容易漏掉的兼容性细节
生成器最后一步通常是复制 CSS，但很多人复制完粘贴到项目里发现不生效。问题常出在：
- 没检查目标元素是否已有
overflow: hidden—— 圆角对子元素溢出部分裁剪，若没设该属性，圆角视觉上“看不见” - 旧版 Safari（iOS 8–9）需要
-webkit-border-radius前缀，虽然现在基本可忽略，但内网老系统仍可能踩坑 - 用 Flex 或 Grid 布局时，某些情况下需额外设置
align-items: flex-start避免内容偏移导致圆角被遮挡 - 如果生成的是 SCSS 变量形式（如
$radius-sm: 4px;），记得确认项目里已引入变量作用域，否则编译后还是原始值
真正麻烦的从来不是怎么生成圆角，而是生成后它在真实 DOM 结构、真实盒模型、真实渲染引擎里有没有被正确解释 —— 多看一眼 computed styles 比多点十次生成按钮管用。
