Border Radius 生成器

什么是 border-radius？

border-radius 是一个 CSS 属性，用于圆化元素盒子的角。单个值会均匀地圆化每个角；四个值可以独立地圆化每个角。这是现代网页设计中最常用的属性之一 — 药丸形按钮、圆角卡片、圆形头像和软角模态框都依靠这一个声明。

角的顺序

当您指定四个值时，CSS 始终以相同的顺序应用它们，从左上角开始，顺时针移动：

1. 左上
2. 右上
3. 右下
4. 左下

因此，border-radius: 10px 20px 30px 40px; 将左上角圆化 10px，右上角圆化 20px，右下角圆化 30px，左下角圆化 40px。此工具遵循完全相同的顺序，其四个角滑块标记相应。

如何使用此工具

1. 保持所有角使用相同值启用状态，拖动左上滑块为整个盒子设置一个半径 — 这是常见情况（按钮、卡片、头像）。
2. 关闭所有角使用相同值以显示四个角的独立滑块，并单独设置它们以获得非对称形状（气泡、泪滴、倾斜卡片）。
3. 选择单位 — px 用于固定像素半径，% 用于相对于元素自身大小的半径（对于正方形盒子上的完美圆形/椭圆形很有用），或 em/rem 以与字体大小缩放。
4. 从 CSS 框复制生成的 CSS，或作为 .css 文件下载，然后粘贴到您的样式表中。

当您调整任何控件时，输出会立即更新 — 没有单独的"生成"步骤。

为什么输出有时比预期的短

如果四个角最后都相等，该工具会输出紧凑的单值形式（border-radius: 20px;）而不是不必要地重复相同的值四次（border-radius: 20px 20px 20px 20px;）。两者都是有效的 CSS 并呈现相同 — 单值形式更容易读取和维护。一旦任何角不同，所有四个值都会明确写出，按上面描述的左上→右上→右下→左下的顺序。

常见问题

我可以使用百分比来实现完美的圆形吗？ 可以 — 在正方形元素（宽度和高度相等）上将单位设置为 %，（均匀）半径设置为 50%。这会将四个角都圆化成完整的圆。

px、%、em 和 rem 之间有什么区别？ px 是不受上下文影响的固定大小。% 相对于元素自身的宽度/高度，因此如果盒子调整大小，会自动缩放。em 相对于元素自身的字体大小；rem 相对于根（html）字体大小，因此与页面基本文本大小一致缩放，无论在哪里使用。

此工具是否支持椭圆形角（单独的水平/垂直半径）？ 目前不支持 — 此工具涵盖常见的均匀和四角情况。对于椭圆形角，请直接在样式表中使用 CSS border-radius: <水平值> / <垂直值> 简写。

这在每个浏览器中都能用吗？ 是的。border-radius 在所有主要浏览器中都已支持超过十年，无需前缀。

隐私

一切都在您的浏览器中进行。您输入的任何 CSS、值或设置都不会发送到服务器 — 声明是在您输入时在本地生成和更新的。