CSS 圆角生成器
CSS 圆角生成器是一个免费的在线工具，帮助你以可视化方式为 HTML 元素创建完美的圆角效果。无需猜测像素值，使用交互式控件独立调整每个角或将它们链接在一起进行统一圆角。工具支持像素和百分比单位，提供预设形状（圆形、椭圆、叶形、对话气泡），并在调整时实时预览元素效果。即时复制生成的带浏览器前缀的 CSS border-radius 属性。非常适合创建现代卡片 UI、圆形头像、胶囊按钮和创意几何形状。
功能介绍
CSS border-radius 属性用于将元素的外边框边角圆润化。它是创建视觉吸引力强、现代化界面的最常用 CSS 属性之一。 border-radius 属性可以接受 1 到 8 个值： - 单值：border-radius: 10px（四个角相同） - 两值：border-radius: 10px 20px（左上/右下，右上/左下） - 三值：border-radius: 10px 20px 30px（左上，右上/左下，右下） - 四值：border-radius: 10px 20px 30px 40px（左上、右上、右下、左下——顺时针） - 八值（椭圆形）：border-radius: 10px 20px 30px 40px / 50px 60px 70px 80px（水平/垂直半径用于椭圆角） 简写与展开属性： - border-radius: 10px（简写，四角） - border-top-left-radius: 10px（单角） - border-top-right-radius: 20px - border-bottom-right-radius: 30px - border-bottom-left-radius: 40px 百分比与像素值： - border-radius: 50%（根据元素尺寸创建圆形/椭圆） - border-radius: 10px（固定像素值，不随元素大小缩放） - 正方形元素上使用 50% 可创建圆形 - 矩形元素上使用 9999px 或 50% 创建胶囊形状 常见用途： - 圆形图片/头像：50% - 胶囊按钮：9999px 或高度 25% - 卡片圆角：8-16px - 弹窗：8-12px - 叶形/叶状形状：不对称半径值 交互式预览会在你修改角值时调整，帮助你即时可视化效果。
使用方法
- 选择调整模式：链接所有角进行统一圆角，或解链接以独立调整每个角。工具显示所有四个角的视觉表示（左上、右上、右下、左下）。
- 拖动滑块或输入像素值调整圆角半径。预览元素随值变化实时更新。使用百分比模式进行响应式或形状相对圆润。
- 启用椭圆模式（高级）为每个角设置不同的水平/垂直半径，创建椭圆形而非圆角。允许有机、blob状形状。
- 从预设库中尝试预设形状：circle、ellipse、leaf、flower、talk blob、tab 形状等。点击预设立即将相应的 border-radius 值应用于预览。
- 通过切换预览的尖角/圆角状态比较原始与圆角版本。帮助你看到 CSS 将产生的确切转换。
- 从输出面板复制 border-radius CSS 代码。同时提供简写（如 border-radius: 10px 20px;)和单独的属性（border-top-left-radius 等）。
计算示例
输入: 左上:20px 右上:20px 左下:0 右下:0
过程: 对四角应用非对称圆角
结果: border-radius: 20px 20px 0 0;
输入: 全部: 50%
过程: 四角50%圆角形成圆形/椭圆
结果: border-radius: 50%; (形成圆形)
相关搜索
相关搜索：圆角生成器, css 边框半径, 圆角边框, 边框圆角。
圆角生成器css 边框半径圆角边框边框圆角
常见问题
如何创建完美的圆形？
要创建完美圆形，元素必须是正方形（宽高相等），并设置 border-radius: 50%。对于 200x200px 头像，使用 width: 200px; height: 200px; border-radius: 50%;。如果元素不是正方形，50% 会产生椭圆。对于没有固定尺寸的响应式圆形，使用 aspect-ratio: 1; 配合 width 和 border-radius: 50%。
border-radius 的最大值是多少？
CSS 中 border-radius 没有严格的最大值。大于元素尺寸一半的值只会产生完全圆角效果。对于胶囊形按钮，常见做法是使用非常大的值如 9999px 或 9999em——这保证无论元素高度如何都能完全圆角侧面。50% 创建椭圆角（宽度和高度的各一半），而 9999px 创建更圆润的半圆端。
可以用 CSS 过渡动画 border-radius 吗？
可以，border-radius 是可动画的。你可以平滑过渡不同的 border-radius 值：.element { border-radius: 0; transition: border-radius 0.3s ease; } .element:hover { border-radius: 20px; }。这在悬停或类变化时创建平滑变形效果。现代浏览器中百分比和像素值之间的动画可行，但插值可能不总是完全平滑。
为什么 border-radius 对我的表格或图片不起作用？
border-radius 需要 overflow: hidden（在父元素上）或正确的 display 属性才能在某些元素上可见。对于图片，border-radius 会裁剪图片内容。对于表格，可能需要 border-collapse: separate; 才能使 border-radius 在表格单元格上工作。如果圆角不可见，检查元素是否有 overflow:hidden 在某处裁剪效果，或 border-radius 是否被更具体的 CSS 选择器覆盖。
如何创建叶子或有机 blob 形状？
对于叶子形状，使用不对称的 border-radius 值，其中对角有非常不同的半径（如 border-radius: 0 100px 0 100px 用于水平叶形）。对于有机的 blob 形状，使用具有不同水平/垂直半径的八值椭圆语法（如 border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%）。CSS 可以创建流畅的 blob 形状——与动画结合用于交互式 blob 效果。