任务路径 / 从输入到结果
如何塑造 CSS 圆角
- 01
选择单位
把“单位”设为“像素”或“百分比”——工作区以像素开始。像素在任何元素尺寸下都保持不变；百分比随元素缩放，这正是实现不对称有机形状的关键。
- 02
调整四个圆角
移动“左上”“右上”“右下”“左下”四个滑块——每个都可在所选单位下以 1 为步进取 0 到 100。四个角初始都是 24 px，预览卡片会随每次修改重绘。
- 03
联动或取消联动
保持“联动所有圆角”开启即可同时修改全部圆角；关闭它则可独立塑造每个角。工作区在开关旁写明了：联动时，修改一个圆角会同时更新全部四个。
- 04
试用示例形状
点击“加载示例”可得到一个不对称的参考：左上和右下为 64 px，右上和左下为 12 px，且不联动——这正是卡片和头像上常见的对角叶片形。“重置”恢复统一的 24 px 默认值。
- 05
检查生成的声明
输出始终按顺时针列出四个值——左上、右上、右下、左下——粘贴后每个角都保持明确。状态标记显示“CSS 有效”；任何超出范围的角都会把它变为“检查取值”并阻止复制。
- 06
复制或下载 CSS
点击“复制 CSS”，把 .rounded-card 规则以四值 border-radius 声明复制下来；或点击“下载 .css”保存为 toolars-border-radius.css。同一条声明对图片、按钮、卡片和任何其他元素都适用。