CSS圆角生成器

功能说明

CSS圆角生成器用于可视化编辑border-radius属性，支持四角独立设置水平和垂直半径。

功能特点：联动模式（4角统一）和独立模式（不规则形状）切换、px和%单位切换、12种预设形状、一键复制简化后的CSS代码。

适用于卡片/按钮基础圆角、胶囊按钮、正圆头像、有机斑块、不规则装饰形状等场景。

常见问题

px和%单位的区别？

px是绝对像素，适合卡片、按钮等固定视觉元素。%是相对容器宽高的百分比，50%时会得到正圆/椭圆，适合头像、有机斑块。

为什么50%在长方形中得到椭圆？

因为%分别相对于宽和高计算——水平半径=宽×50%，垂直半径=高×50%。长方形宽≠高，所以两个半径不等，得到椭圆。

什么是联动模式？

联动模式下4个角使用相同的圆角值，适合95%的日常UI场景（卡片、按钮、模态框）。独立模式用于不规则形状。

你可能还想问

四个角可以设置不同数值吗？

可以。border-radius 支持 1-4 个值与逐角写法，也支持椭圆角（水平/垂直两轴）；拖拽可视化调节后直接复制生成好的 CSS。

圆角值超过元素一半会怎样？

浏览器会自动按比例缩减各角，不会溢出报错；想得到胶囊形（全圆两端）直接用大值如 9999px，等效且不怕元素高度变化。

图片设置圆角后边缘有白边？

通常是父容器背景或 img 默认基线间隙问题：给 img 设 display:block 并确认父级背景；椭圆角叠加 object-fit:cover 时注意裁切方向。

相关工具

相关内容