首页CSS圆角生成器

CSS圆角生成器

在线CSS圆角生成器,支持四角独立输入、快捷预设与形状模板,实时预览并一键复制 border-radius 代码。

实时预览

圆角效果
当前圆角值: 16px

CSS 代码

border-radius: 16px;

圆角设置

快捷预设

精确输入(px)

形状预设



说明文档

关于 CSS 圆角生成器

该工具用于可视化调整元素四角圆角参数,支持快捷预设、形状模板与代码导出。

核心功能

  • 四角独立控制:分别设置左上、右上、右下、左下圆角值。
  • 快速预设:一键应用常见圆角等级。
  • 形状模板:内置胶囊、票券等形状方案。
  • 实时预览:即时查看形状变化与最终 border-radius 值。
  • 代码复制:输出并复制完整 CSS 片段。

使用说明

  1. 在控制区输入或调整各角圆角值。
  2. 选择快捷预设或形状模板进行快速试验。
  3. 在预览区确认视觉结果。
  4. 复制 CSS 代码并应用。

使用场景

  • 按钮、卡片、输入框统一圆角规范。
  • 品牌风格形状探索。
  • UI 组件视觉细节微调。

常见问题

为什么不同尺寸下圆角观感不同?

同一绝对像素值在不同尺寸元素上的相对比例不同,建议按组件尺寸分层配置。

可以直接用百分比吗?

可以,但需注意百分比圆角会随元素宽高变化而变化,适合响应式形状。