可视化圆角生成器
为网页组件制作完美的圆角，不应该靠盲猜数值和不断刷新浏览器。这款可视化圆角生成器让你可以通过拖动滑块，实时预览圆角曲线对元素的影响。调出满意的效果后，只需一键即可将优化后的 CSS 代码复制到剪贴板。
由于所有的计算和预览都在你的浏览器本地完成，这款工具不仅速度极快，而且完全保护隐私。你的任何设计或点击操作都不会被上传到服务器。
掌握 CSS 圆角技巧
border-radius 属性是现代网页设计的基础，常用于柔化按钮、图片、弹窗和布局容器的生硬边缘。虽然表面上看很简单，但当你想要单独设置特定圆角时，它的语法细节其实相当丰富。
这款 CSS 圆角生成器能帮助你理解并高效使用 CSS 简写语法。当你关联所有圆角时，工具会输出一个统一的值（例如 border-radius: 16px;）。如果你取消关联以创建自定义形状，生成器会根据你的输入自动格式化 CSS 代码：
- 四个值： 如果所有圆角都不一样，CSS 会从左上角开始按顺时针顺序应用这些值（例如
border-radius: 16px 8px 4px 2px;）。 - 两个值： 如果左上角和右下角相同，且右上角和左下角相同，工具会智能地将代码精简为两个值（例如
border-radius: 16px 0;）。
像素与百分比
编写 CSS 圆角时，最常见的纠结之一就是选择合适的单位。本工具可让您在像素 (px) 和百分比 (%) 之间轻松切换，这两种单位在 UI 设计中各有其独特的用途。
像素 (px) 是绝对单位。无论是应用于小巧的按钮还是大尺寸的主图，12px 的圆角看起来都完全一样。像素是卡片、下拉菜单和输入框等 UI 组件的标准选择，因为它们能在整个应用中保持一致且统一的设计语言。本工具支持的像素值最高可达 200px。
百分比 (%) 是相对于元素自身尺寸的相对单位。在正方形元素上设置 50% 的圆角，无论该正方形宽 50 像素还是 500 像素，都会呈现出一个完美的正圆。如果元素是长方形，50% 则会生成一个椭圆形。百分比非常适合头像或装饰性背景图形等响应式元素。本工具将百分比上限设为 50%，因为在 CSS 中，超过此值并不会进一步增加圆角的视觉效果。
超越基础圆角：CSS 形状生成器
虽然 border-radius 常用于简单的圆角效果，但它也是一个强大的 CSS 形状生成器。通过取消四个角的联动并组合极端数值，无需 SVG 文件或复杂的 clip-path 即可创建独特的几何形状。本工具包含几个预设来演示其效果：
- 胶囊形： 为所有角设置一个极高的像素值（如
9999px），即可创建“胶囊”形状。这种形状广泛应用于徽章、标签和现代的 CTA 按钮。浏览器会自动将实际圆角限制为元素高度的一半，确保两端呈现完美的半圆形。 - 圆形： 将所有角设置为
50%即可将正方形变成完美的圆形。 - 叶片形： 将左上角和右下角设置为
0，并将右上角和左下角设置为较高的值（如48px），即可创建不对称的自然叶片形状。 - 选项卡： 仅对左上角和右上角设置圆角（例如
16px），同时保持底部两个角为0，即可创建经典的文件夹选项卡形状，非常适合导航菜单。
完善您的 UI 组件
圆角很少孤立存在；它们通常是更广泛、统一的设计系统的一部分。例如，一个设计精良的卡片组件，会将微妙的圆角与深度和色彩相结合，从而在页面中脱颖而出。
生成理想的圆角后，您可以将其与其他 CSS 效果结合，完善您的设计。尝试使用我们的 CSS 阴影生成器 为新形状添加柔和的投影，营造出立体的悬浮效果。如果您正在设计按钮或装饰性背景元素，可以使用 CSS 渐变生成器 添加充满活力的背景，或者使用 配色生成器 寻找完美的互补纯色。