什么是 CSS 边框圆角生成器？

CSS 边框圆角生成器是一个可视化工具，让您通过直接在实时预览上拖动手柄来创建自定义边框圆角形状。您无需猜测 CSS 值，而是在调整时实时看到形状变化。

该工具支持简单模式（4 个角值）用于标准圆角，以及高级模式（8 值语法，每个角有水平/垂直）用于创建有机斑点形状、蛋形、水滴和其他创意形式。

完美用于：此工具消除了手动编码 border-radius 值的试错过程，为您提供即时视觉反馈和生产就绪的 CSS 代码。

这是为谁准备的？

网页开发者

需要为按钮、卡片、容器和 UI 组件提供精确的边框圆角值，达到像素级精度。

设计师

想要探索有机斑点形状，用于英雄部分、装饰元素和现代 UI 设计。

CSS 爱好者

任何使用 CSS 的人都希望有更快、更直观的方式来可视化和生成 border-radius 代码。

如何使用

基本用法（简单模式）

调整角值

使用滑块或在数字输入框中输入值，为每个角（左上、右上、右下、左下）设置圆角半径。

锁定或解锁角

切换全部锁定使所有角一起变化，或解锁以独立调整每个角，创建不对称形状。

拖动手柄

形状预览会立即更新 — 您也可以直接在形状上拖动手柄进行直观的可视化编辑。

复制 CSS 代码

使用复制 CSS 按钮复制生成的 CSS 代码，并直接粘贴到您的样式表中。

创建有机形状（高级模式）

切换到高级模式

切换到高级模式以访问 8 个值 — 每个角都有单独的水平 (H) 和垂直 (V) 圆角控制。

使用斜杠语法

这启用了 CSS 斜杠语法：border-radius: H1 H2 H3 H4 / V1 V2 V3 V4用于椭圆角和有机形状。

使用 8 个手柄微调

沿着形状边缘拖动 8 个手柄，或使用滑块精确控制水平和垂直圆角值。

生成随机形状

点击随机立即生成有趣的斑点形状 — 完美用于创意探索和独特设计。

使用预设

点击预设开关以显示 12 个内置形状，包括圆角、胶囊、圆形、叶子、水滴、蛋形和各种斑点样式。点击预设会自动应用其值并切换到适当的模式。

快速开始：预设是最快的入门方式。选择接近您所需形状的预设，然后使用滑块或拖动手柄进行微调。

嵌套圆角计算器

当在具有内边距的圆角父元素内放置圆角子元素时，内部圆角必须计算为：inner = max(0, outer - padding)。打开嵌套圆角计算器部分，输入外部圆角和内边距，该工具会计算正确的内部圆角并提供可视化预览。

未计算

圆角不匹配

内角与外角不对齐
尴尬的视觉间隙
不专业的外观

已计算

完美对齐

数学上正确的内部圆角
光滑、一致的曲线
专业、精致的外观

功能

两种编辑模式

简单模式提供 4 个滑块用于标准圆角。高级模式公开完整的 8 值 CSS border-radius 语法，让您为每个角设置独立的水平和垂直圆角，用于有机斑点形状。

可视拖动手柄

拖动手柄直接放在形状预览上。在简单模式中，4 个手柄位于角上。在高级模式中，8 个手柄沿着边缘出现，参考线显示圆角方向。

单位切换（px / %）

在像素和百分比单位之间切换。切换时值会自动转换，因此您的形状在不同单位系统中保持一致。

全部锁定角

锁定时，调整任何角会将相同值应用于所有四个角以实现均匀圆角。解锁以进行单独控制和不对称设计。

12 个内置预设

快速应用常见形状：圆角、胶囊、圆形、叶子、票券、水滴、蛋形、斑点（3 种变体）、徽章和消息框。每个预设都显示一个迷你形状预览，便于选择。

随机化

一键生成随机有机形状。该工具会自动切换到高级模式并创建独特的斑点形状，完美用于创意项目。

可自定义预览

调整预览尺寸（宽度和高度从 100px 到 500px）以测试边框圆角在不同元素尺寸下的外观。使用内置颜色选择器更改形状颜色和背景颜色。

嵌套圆角计算器

一个可折叠的实用工具，用于计算当子元素位于具有内边距的圆角父元素内时的正确内部 border-radius。输入外部圆角和内边距以获得数学上正确的内部圆角，并提供可视化预览。

即时 CSS 输出

生成的 CSS 代码实时更新，可以一键复制到剪贴板。输出使用简写符号，当水平和垂直值不同时包括斜杠语法。

常见问题

简单模式和高级模式有什么区别？

简单模式使用标准 4 值 border-radius（每个角一个值）— 完美用于按钮、卡片和具有圆形圆角的标准 UI 元素。

高级模式使用 8 值 CSS 语法，其中每个角都有单独的水平和垂直圆角，启用有机斑点形状、椭圆角和 4 值无法实现的创意形式。

border-radius 中的斜杠 (/) 是什么意思？

CSS border-radius 属性支持斜杠语法：border-radius: H1 H2 H3 H4 / V1 V2 V3 V4。

斜杠前的值控制水平圆角，斜杠后的值控制垂直圆角。当这些值不同时，角变成椭圆形而不是圆形，创建蛋形、水滴和斑点等有机形状。

示例：border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%创建蛋形，具有不同的水平和垂直曲率。

我应该为 border-radius 使用 px 还是 %？

选择取决于您的用例：

对于固定尺寸元素（如按钮和图标）使用 px，您希望精确控制和一致的圆角，无论元素尺寸如何
对于响应式元素或创建斑点/有机形状时使用 % — 正方形上的 50% 创建完美圆形，百分比值随元素尺寸按比例缩放

专业提示：对于响应式设计，百分比值通常效果更好，因为当元素调整大小时它们保持比例圆角。

嵌套圆角计算器有什么用？

当您有一个具有内边距的圆角父元素时，内部子元素需要更小的 border-radius 以看起来正确并保持视觉和谐。

公式是：inner radius = max(0, outer radius - padding)

示例：具有 16px border-radius 和 8px 内边距的卡片需要在其内容区域上有 8px 内部圆角。没有此计算，内角将不会与外部曲线正确对齐，创建尴尬的视觉间隙。

常见错误：当存在内边距时，对父元素和子元素使用相同的 border-radius 值 — 这会创建不对齐的角和不专业的外观。

我可以在任何框架中使用生成的 CSS 吗？

可以。输出是标准 CSS，适用于所有现代浏览器，与任何框架或开发环境兼容。

您可以直接粘贴到：

标准 CSS 样式表（.css 文件）
HTML 中的内联样式
CSS-in-JS 解决方案（styled-components、Emotion 等）
CSS 模块
Tailwind CSS 任意值
任何预处理器（SCSS、LESS、Stylus）

生成的代码使用标准 CSS 属性，具有出色的浏览器支持（IE9+、所有现代浏览器）。