CSS 圆角生成器

功能

• 四个角分别可调，实时预览
• px、rem、百分比三种单位可切换
• 四个角相同时自动缩写成单个值 —— 与手写 CSS 的习惯一致
• 单位切到百分比时，能直接看到它变成了椭圆
• 数值都做过夹取：负数归零、超大值夹到 999，不产出非法 CSS
• 下方给出可复制的 CSS 规则，带 `.rounded` 选择器
• 代码带语法着色，复制按钮一步拿走
• 所有计算在浏览器本地完成，不上传任何东西

使用方法

1. 选单位（一般用 px 或 rem）
2. 分别填四个角的值，预览会立刻跟着变
3. 想看百分比的效果就把单位切成 %，注意它会是椭圆
4. 觉得对了，点复制按钮把 CSS 拿走

常见问题

为什么 50% 出来的不是圆？

因为 `border-radius` 的百分比是按两个方向分别算的：水平方向按元素宽度的百分比、垂直方向按高度的百分比。盒子不是正方形时，两个方向的半径自然不同，画出来就是椭圆。想要正圆有两个办法：一是让盒子本身是正方形（宽高相等）再用 `50%`；二是用一个大到超过短边一半的像素值（`9999px`），浏览器会把半径夹到短边的一半，于是得到「两头圆的胶囊」或「正圆」—— 这也是做胶囊按钮的常见写法。

四个值分别对应哪个角？

从左上开始顺时针：`border-radius: 左上 右上 右下 左下`。三个值时是「左上、右上与左下、右下」；两个值时是「左上与右下、右上与左下」；一个值就是四角相同。本工具在四角相同时会输出一个值，不相同时输出四个值 —— 与 CSS 自身的缩写规则一致，写出来就是人手写的样子。

用 `9999px` 做胶囊按钮安全吗？

安全，而且这是常见做法。浏览器会把超过短边一半的半径夹到短边的一半，所以不管按钮多高，写 `9999px` 都会得到完美的两头半圆。比写 `50%` 更稳 —— 后者在宽高比变化时形状会跟着变（甚至变成椭圆），而 `9999px` 永远是胶囊。代价只是数值看着有点夸张。

圆角会影响性能吗？

圆角本身几乎不影响，但有一类情况值得注意：给一个正在做动画的元素加圆角，会比无圆角多一次裁剪（clip），在低端机上可能掉帧。如果动画过程中圆角没变，可以把它放在一个不会重绘的父层上。现代的 `border-radius` 在 GPU 合成下开销很小，绝大多数场景不必为它调整结构。