CodeKitHub工具介绍
border-radius 是控制元素圆角的 CSS 属性。手写时需要按固定顺序填四个值——左上、右上、右下、左下——顺序很容易搞反,尤其是四个角大小还不一样的时候。
这个工具省去了记顺序的麻烦：拖动滑块，预览框里的圆角实时变化,下方代码框直接显示对应的 CSS。一个锁定开关可以在「四角统一」（最常见的用法）和「四角独立」（做异形、有机形状）之间切换。
为什么使用它？
- 拖动即实时预览，不用改代码再刷新页面看效果。
- 一键锁定四角，快速做出常见的统一圆角；解锁后可以做胶囊按钮、对话气泡、不规则色块。
- 四角相同时自动输出简写的单值形式，不同时输出完整四值形式，随时可以直接复制粘贴。
- 全部在浏览器本地计算，不会上传任何你输入的内容。
- 免费、不用注册，手机上也能用。
使用方法
- 保持「四角锁定」勾选状态，拖动任意一个滑块即可统一调整全部四个角。
- 取消锁定后可以单独控制每个角，适合做胶囊形、水滴形或不对称卡片。
- 调整滑块时预览框会实时更新。
- 从代码框复制生成的 CSS，粘贴到你的样式表里即可使用。
示例
输入
左上 40px，右上 8px，右下 40px，左下 8px输出
border-radius: 40px 8px 40px 8px;这种对角不对称的设置会做出叶片或花瓣形状的轮廓，卡片和徽章设计里很常见。
该用 px 还是 %？
这个生成器默认输出像素值，对大多数界面元素（按钮、卡片、输入框）来说这是更合适的选择——不管元素大小怎么变化,圆角都是固定不变的。
百分比的表现不一样：它是相对元素自身宽高计算的，所以正方形元素设置 50% 会变成正圆，长方形元素设置 50% 会变成椭圆。如果你想要这种随容器缩放的效果（比如头像、有机形状），可以把生成代码里的 px 手动换成 % ——例如 border-radius: 50% 能把任意正方形变成圆形。
常见的 border-radius 用法
- 圆角卡片：四角相同，界面组件常用 8–16px。
- 胶囊按钮：把圆角设为元素高度的一半，或者直接用 9999px，不管高度多少都会自动裁成完整胶囊形。
- 圆形头像：正方形元素（宽高相等）设置 border-radius: 50%。
- 对话气泡：三个角圆润，一个角是直角——把三个滑块调高，剩下一个设为 0。
- 叶片/花瓣形：对角设置相同、相邻角设置不同——比如左上和右下都调大，右上和左下都调小。
配合阴影一起用
圆角很少单独出现，卡片、按钮通常还需要一点阴影来增加层次感。可以用「盒阴影生成器」拖出合适的投影效果，和这里生成的圆角代码一起用在同一个元素上。
常见问题
border-radius 四个值的顺序是怎样的？
CSS 简写始终按左上、右上、右下、左下的顺序，从左上角开始顺时针排列。这个工具的四个滑块也按同样顺序标注，不用自己记顺序。
四个角可以用不同单位吗？
实际 CSS 里可以给不同角混用 px、%、em、rem，只是实践中很少这么做。为了简单，这个工具统一生成 px 值——需要混合单位的话，直接在你的样式表里把某个值改成 % 或其他单位即可。
为什么 border-radius: 50% 有时候不是圆形而是椭圆？
因为百分比是分轴独立计算的——水平方向的圆角是相对元素宽度的百分比，垂直方向是相对高度的百分比。正方形元素（宽高相等）会得到正圆，长方形元素会得到椭圆。
border-radius 对背景图和边框也生效吗？
会——border-radius 会把元素的背景、边框，以及（现代浏览器里）box-shadow 都裁成圆角形状。但不会自动裁剪溢出的子元素内容，除非父元素同时设置了 overflow: hidden。
圆角大小有上限吗？
没有硬性上限——如果圆角超过元素宽度或高度的一半，浏览器会自动限制，让那一侧的两条曲线正好在中点相接，这也是正方形能变成正圆或胶囊形的原理。