CSS border-radius 圆角生成器能做什么？
border-radius 圆角生成器用可视化滑块调节元素的圆角弧度，实时预览效果，一键复制 CSS 代码。无论是按钮的 4px 微圆角、卡片的 12px 大圆角、头像的正圆，还是不对称的异形圆角，都能拖出来、拿走就用，省去反复改代码刷新页面的试错。
使用步骤
- 打开 border-radius 生成器
- 拖动四角滑块分别设置左上、右上、右下、左下圆角
- 点击「链接四角」可整体同步调节
- 切换高级模式：每角可设水平/垂直半径，做椭圆异形
- 选择预设：微圆角、卡片圆角、胶囊形、圆形
- 实时预览效果
- 复制 CSS 代码粘贴到样式表
常用圆角规范
- 4-6px：按钮、输入框，克制精致，商务风格常用
- 8-12px：卡片、弹窗，主流 App 设计规范（iOS 12px、Material 8-12px）
- 16-24px：大卡片、图片容器，柔和现代感
- 999px / 50%：胶囊按钮、头像正圆
- 单角圆角：左上右下大圆角、其余直角，做标签、装饰块
CSS 语法详解
- border-radius: 12px; 四角统一
- border-radius: 12px 8px 6px 4px; 顺时针：左上、右上、右下、左下
- border-radius: 50%; 正圆（正方形元素）或椭圆
- border-radius: 12px / 24px; 水平/垂直半径，椭圆角
- border-top-left-radius: 20px; 单角控制
- 百分比单位：按元素宽高比例缩放，响应式友好
注意事项与边界情况
- 圆角值超过元素短边一半会被浏览器自动收缩，不会溢出
- 圆角+边框同时存在时，边框跟随圆角裁切，图片记得用 overflow: hidden
- 图片圆角：直接给 img 加 border-radius 即可，不需要额外包裹
- 性能无忧：border-radius 是纯渲染属性，不影响动画性能
- 深色主题下圆角视觉更明显，可适当减小 1-2px
常见问题
- 怎么做胶囊按钮？
- border-radius: 999px 或 50px，配合 padding 形成药丸形状。
- 四个角不同怎么写？
- border-radius: A B C D 按顺时针设置，A左上、B右上、C右下、D左下。
- 图片圆角不生效？
- 确认 img 元素本身加了 border-radius，父元素的 overflow 不裁掉子元素。
- 圆角影响性能吗？
- 不影响，浏览器硬件加速渲染，放心使用。
- 和阴影搭配有技巧吗？
- 大圆角配柔和大阴影（模糊半径大、透明度低），小圆角配紧实小阴影。
实战案例：统一按钮圆角体系
需求：全站按钮圆角规范化。方案：小按钮 6px、主按钮 10px、胶囊按钮 999px 三级体系。写法有个展开恒等式必须记牢：简写值数量决定展开方式——1 个值 12px 展开为四角全 12；2 个值 12px 8px 展开为 12 8 12 8（对角相同）；3 个值 12px 8px 6px 展开为 12 8 6 8（第 4 个复用第 2 个）；4 个值按左上顺时针。用错展开规则，按钮和卡片的圆角会对不上设计稿，而且肉眼很难发现是简写的问题。
常见错误
- 二值简写理解反了：以为 12px 8px 是上下/左右，实际是左上右下/右上左下（对角）
- 给行内元素（display: inline）加圆角不生效：先转 inline-block
- 图片圆角写了外层容器没写 overflow: hidden：图片直角照样露出来
- 圆角+边框+阴影混用时顺序不对：边框不跟弧度，观感割裂
- 移动端点击区域随圆角缩小：胶囊按钮记得保持足够的可点高度
进阶方向
- 异形圆角：两值斜杠语法 border-radius: 12px 30px / 20px 10px 做椭圆弧
- 圆角头像+1px 内描边的组合是社交类产品的经典做法
- 按钮圆角与卡片圆角成比例（如 2:3）形成视觉体系
- 配合阴影生成器调配套阴影，圆角+阴影成对设计更协调
总结
border-radius 生成器让圆角「拖出来就有代码」：小圆角精致、大圆角柔和、胶囊显设计感。记住 4/8/12px 的常用规范，界面质感立刻上一个台阶。