CSS 圆角生成器
设置四个角的值、查看效果并复制可直接粘贴的 CSS 声明。
使用步骤
如何使用
- 选择像素或百分比，并将每个角设为 0 到 200。
- 调整数值时查看实时预览。
- 生成、复制或重置 CSS 简写。
顺时针四角简写
输出遵循 CSS 四值顺序：左上、右上、右下、左下。每个角都可在所选单位下独立调整为 0 到 200。
像素与百分比
像素半径是固定长度。百分比由 CSS 根据对应框尺寸解析，因此非正方形框的曲线会不同。本工具每角的两个方向使用相同数值，不生成斜杠分隔的水平和垂直半径。
常见问题
你可能还想知道
百分比半径表示什么？
CSS 根据框的尺寸解析百分比；宽矩形和正方形使用相同数值时外观可能不同。
能创建椭圆角吗？
输出每角使用一个数值。百分比按框的两个方向分别解析，因此非正方形框可能产生椭圆角。本工具不生成用斜杠独立指定水平和垂直半径的格式。
最大值为什么是 200？
0–200 范围适用于常见卡片、面板和徽章，也允许较大的曲线。相邻圆角无法容纳时 CSS 可能会缩小半径。