圆角生成器

工作原理

四个滑块，每个角一个，输入时立即触发更新。开启"锁定全部角"后，拖动任意一个滑块都会把它的值复制给其余三个，然后重新生成 CSS。这些数值按 CSS 实际使用的顺序拼接成简写形式——从左上角开始顺时针：左上、右上、右下、左下。同一串文本会直接写入预览框的 style.borderRadius，所以预览不是对输出效果的近似模拟，它就是你复制的那段 CSS，由你的浏览器亲自渲染出来。

有两个行为滑块本身展示不出来，但值得了解。第一，这个工具使用像素，而像素和百分比的表现并不相同：在矩形上设置 border-radius: 50% 会分别按两个轴计算，得到一个椭圆；而像 9999px 这样的大像素值，才会得到人们通常想要的胶囊形状。第二，规范会对重叠的圆角做限制：当一条边上的圆角之和超过该边的长度时，浏览器会按比例缩小所有圆角。这就是为什么在小盒子上把所有滑块都拉到 100，形状最终会停止变化，也是为什么你从不需要精确计算"高度的一半"——超出的部分浏览器会自动帮你限制住。

整个工具只是这个页面里几十行 JavaScript：滑块的值在 DOM 之间传递，全程没有任何网络请求，你可以在开发者工具的"网络"面板中亲自确认这一点。