ToolPal
设计师屏幕上五彩缤纷的圆角形状

CSS 圆角生成器：告别手动试数值

📷 Tranmautritam / Pexels

CSS 圆角生成器：告别手动试数值

全面掌握 CSS border-radius — 从基础圆角按钮到完美圆形和有机形状。包含可视化生成工具。

2026年4月14日3分钟阅读

圆角是现代 UI 设计中最基础也最重要的视觉元素之一。一个 border-radius: 8px 能让按钮从生硬变柔和，但这个属性能做的远不止这些——它可以做出完美圆形、椭圆，甚至像黏液一样流动的有机形状。

这篇文章会带你从基础到进阶，全面掌握 border-radius，同时介绍如何用 CSS 圆角生成器 快速获得你想要的效果。

border-radius 基础

border-radius 可以同时控制四个角，也可以单独控制每个角。最基本的写法：

/* 四个角统一设置 */
.box {
  border-radius: 8px;
}

/* 四个角分别设置（顺序：左上、右上、右下、左下） */
.box {
  border-radius: 8px 16px 24px 4px;
}

/* 两个值：上下、左右 */
.box {
  border-radius: 8px 16px;
}

/* 单独设置每个角 */
.box {
  border-top-left-radius: 8px;
  border-top-right-radius: 16px;
  border-bottom-right-radius: 24px;
  border-bottom-left-radius: 4px;
}

值的顺序和 margin、padding 一样，遵循顺时针规则：从左上角开始，依次是右上、右下、左下。

px 还是 %？这很重要

用 px 的场景

固定尺寸的元素用 px 最直观：

/* 按钮 */
.btn { border-radius: 6px; }

/* 卡片 */
.card { border-radius: 12px; }

/* 标签 */
.tag { border-radius: 4px; }

px 的好处是直观——不管元素大小怎么变，圆角像素值不变。

用 % 的场景

做圆形或者椭圆必须用 %：

/* 完美圆形（宽高相等时） */
.circle {
  width: 80px;
  height: 80px;
  border-radius: 50%;
}

/* 椭圆（宽高不等时用 50%） */
.ellipse {
  width: 200px;
  height: 100px;
  border-radius: 50%;
}

百分比是相对于元素自身宽高计算的——水平半径相对于宽度，垂直半径相对于高度。所以正方形 + 50% = 圆形，长方形 + 50% = 椭圆。

常见使用场景

场景一：按钮

按钮的圆角直接影响品牌调性：

/* 直角：严肃、企业感 */
.btn-square { border-radius: 0; }

/* 小圆角：现代、友好 */
.btn-subtle { border-radius: 4px; }

/* 中圆角：活泼 */
.btn-rounded { border-radius: 8px; }

/* 胶囊型：流行、年轻 */
.btn-pill { border-radius: 9999px; }

为什么胶囊型用 9999px 而不是 50%？因为对于宽度远大于高度的按钮，50% 会产生椭圆效果，而不是真正的胶囊形状。用一个足够大的 px 值可以保证始终是胶囊形。

场景二：卡片

卡片的圆角处理有一个常见陷阱：

.card {
  border-radius: 16px;
  overflow: hidden; /* 必须加！否则图片会超出圆角 */
}

.card img {
  width: 100%;
  display: block;
}

忘记加 overflow: hidden 是新手最常犯的错误——卡片的圆角设置好了，但内部图片的直角会露出来。

场景三：头像和圆形图标

.avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  object-fit: cover; /* 保持图片比例 */
}

.icon-badge {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: #3b82f6;
  display: flex;
  align-items: center;
  justify-content: center;
}

场景四：部分圆角（标签页、下拉菜单）

有时候只需要部分角有圆角：

/* 标签页：只有顶部两角有圆角 */
.tab {
  border-radius: 8px 8px 0 0;
}

/* 下拉菜单：只有底部两角有圆角 */
.dropdown {
  border-radius: 0 0 8px 8px;
}

/* 悬浮提示：左下角直角（指向触发元素） */
.tooltip-bottom-left {
  border-radius: 8px 8px 8px 0;
}

有机形状：斜杠语法

这是 border-radius 最强大也最容易被忽略的功能。斜杠语法允许为每个角单独设置水平半径和垂直半径：

/* 语法：水平半径 / 垂直半径 */
.blob {
  border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%;
}

斜杠前面的四个值是四个角的水平半径（左上、右上、右下、左下），斜杠后面的四个值是对应的垂直半径。

这种语法可以创造出自然流动的有机形状，常用于：

  • 背景装饰元素
  • 头像背景
  • 着陆页的视觉点缀
  • 创意卡片设计

手动调这八个值非常耗时。用 CSS 圆角生成器 拖动滑块，实时看效果，找到满意的形状后一键复制代码。

圆角动画效果

border-radius 支持平滑过渡，能做出很有趣的动画效果。

Hover 过渡

.btn {
  border-radius: 4px;
  transition: border-radius 0.25s ease;
}

.btn:hover {
  border-radius: 20px;
}

简单但有效——鼠标悬停时按钮变得更圆滑，增加交互感。

形状变形动画

@keyframes blobMorph {
  0%, 100% {
    border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%;
  }
  25% {
    border-radius: 30% 60% 70% 40% / 50% 60% 30% 60%;
  }
  50% {
    border-radius: 50% 50% 40% 60% / 40% 50% 60% 50%;
  }
  75% {
    border-radius: 40% 60% 50% 50% / 60% 40% 50% 40%;
  }
}

.animated-blob {
  animation: blobMorph 10s ease-in-out infinite;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  width: 300px;
  height: 300px;
}

这种流动变形的效果在现代着陆页上非常流行，给页面带来生命力。

方形变圆形动画

.shape {
  border-radius: 8px;
  transition: border-radius 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

.shape.morphed {
  border-radius: 50%;
}

用弹性缓动函数（cubic-bezier）让形状变换更有弹性感。

在设计系统中使用 border-radius

项目规模大了之后，最好用 CSS 变量统一管理圆角值：

:root {
  --radius-none: 0px;
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-2xl: 24px;
  --radius-3xl: 32px;
  --radius-full: 9999px;
}

/* 使用时 */
.btn    { border-radius: var(--radius-sm); }
.card   { border-radius: var(--radius-xl); }
.avatar { border-radius: var(--radius-full); }
.input  { border-radius: var(--radius-md); }

这样修改设计风格时，只需要改一处变量定义，整个项目的圆角就会统一更新。

Tailwind CSS 的 rounded-* 类就是这种思路的实现。如果你在用 Tailwind，rounded-sm、rounded-lg、rounded-full 等类开箱即用。

浏览器兼容性

border-radius 在所有现代浏览器中完全支持，包括：

  • Chrome、Firefox、Safari、Edge 的所有现代版本
  • IE 9+（斜杠语法在 IE 中有限制，但现代项目基本不需要考虑 IE）

实际项目中不需要担心兼容性问题。

为什么用生成器而不是手写？

对于简单的圆角（统一值或者按钮圆角），手写当然没问题。但涉及斜杠语法的有机形状，八个值的组合理论上有无数种可能，手动调试要花很长时间。

CSS 圆角生成器 的优势：

  • 可视化滑块，实时预览形状变化
  • 支持统一圆角和斜杠语法两种模式
  • 生成标准 CSS 代码，直接复制粘贴
  • 内置常用预设（胶囊、圆形、blob 等）

适合快速原型设计，也适合在设计评审中实时调整。

小结

border-radius 看似简单，实则功能丰富：

  • 4-8px：按钮、输入框的微妙圆角
  • 12-16px：卡片、模态框的现代感圆角
  • 9999px：胶囊型按钮、药丸标签
  • 50%：圆形头像、圆形图标
  • 斜杠语法 + %：有机 blob 形状
  • 配合 transition：平滑的形状变换动画

打开 CSS 圆角生成器，拖一拖滑块，你会发现原来圆角可以这么有趣。

常见问题

分享文章

XLinkedIn

相关文章

颜色转换器：HEX、RGB、HSL、HSV格式转换实用指南

1分钟阅读

CSS Grid vs Flexbox：2026年Web布局完全指南

4分钟阅读

CSP 生成器：告别手写 Content Security Policy 头的痛苦

4分钟阅读