如何生成 CSS border-radius 圆角代码

依次填写左上、右上、右下、左下的数值，再提供单位并执行生成操作，即可得到 CSS border-radius 声明。留空时，角值使用 10，单位使用 px。

概览：按角部数值整理圆角声明

为页面设置圆角时，四个角可以采用相同数值，也可以分别调整。这个工具接收左上、右上、右下和左下四个位置的数值，再生成一条 CSS border-radius 声明。你可以用它整理统一圆角、不对称圆角，或带有零值的角部设置。单位由单独的输入提供，填写后会附加到每个角的数值后面。若暂时不填写角值或单位，也可以先利用工具的默认内容生成结果，再按需要修改。

步骤：填写四个角和单位

1. 在四个角的输入位置分别填写左上、右上、右下、左下的数值。输入顺序不要按照个人习惯调换，因为生成声明中的位置会沿用这四个位置的排列。
2. 在单位位置填写要附加的单位文本，例如 px 或 rem。工具会把你提供的单位文本分别接到四个角值之后，因此同一组结果中的四个值使用这项单位。
3. 某个角留空时，该角按 10 处理；单位留空时，单位按 px 处理。需要使用默认内容时，可以保留相应输入为空，再执行生成操作。
4. 需要不对称效果时，为四个角输入不同数值；需要某个角保留为零时，就在该位置填写 0。完成输入后执行生成操作，并查看输出的 CSS border-radius 声明。

结果解读：检查顺序、单位和零值

拿到结果后，先从左上开始逐项比对，依次确认右上、右下和左下的位置没有错位。接着检查每个数值后是否出现所填写的单位文本；如果单位没有填写，应按 px 这一默认单位理解。四个位置使用相同数值时，声明表达统一圆角；数值存在差异时，声明会保留这种不对称排列。输入 0 的位置也应在结果中保留相应的零值。输出的范围是一条 border-radius 声明，使用时仍需将它放入你自己的 CSS 规则中。

使用示例

设计一个右下角弧度更大的卡片时，我为四个角设置了 16、8、24 和 0，并统一使用 rem 单位。

在四个角依次输入 16、8、24、0，填写单位 rem，然后执行生成操作。

结果应是一条 border-radius 声明，四个位置依次对应左上、右上、右下、左下，并在各数值后附加填写的 rem 单位。

使用限制

• 工具输出的是 border-radius 声明，不包含选择器、其他属性或完整 CSS 样式规则。

常见错误

• 如果把四个输入按照其他方向排列，生成声明中的角部就可能与设计意图错位；请重新按左上、右上、右下、左下核对并填写。

常见问题

能否生成不对称的 CSS 圆角？

可以分别填写四个位置的数值，生成内容会保留左上、右上、右下、左下的排列，因此不同数值能够表达不对称圆角。

不填写数值或单位会怎样？

角值未填写时，该位置采用 10；单位没有填写时，结果采用 px，所以可以先使用默认内容，再补充自定义输入。

如何让某个角保持直角？

在目标角的位置输入 0，生成的声明会保留这个零值；结果仍然是一条 border-radius 声明，而不是其他样式内容。