CSS圆角生成器

手写 CSS 圆角时最麻烦的往往不是记不住 border-radius 这个属性，而是数值靠猜——写个 8px 存盘、切到浏览器刷新、觉得不够圆再改成 12px，来回折腾好几趟。这个 css 圆角生成器把这个循环收进了一个页面：左侧四个输入框分别对应盒子的左上、右上、右下、左下四个角，输入像素值，右侧预览盒立刻按新数值重绘，下方同步吐出对应的 border-radius 代码，选中复制就能贴进自己的样式表。默认四角联动，改一个角其余三角跟着变，适合做统一圆角；取消联动就能单独捏每个角，做出不规则形状。

它背后其实就是 border-radius 这个简写属性的展开规则。当你给四个值时，浏览器按顺时针顺序解析：第一个是左上角，接着是右上、右下、左下，也就是 border-radius: 左上 右上 右下 左下；四角相等时可缩写成单个值。工具做的就是把你在四个框里填的数拼成这个顺序的字符串，并用同一份数值驱动预览盒的实际渲染，所以你看到的效果和复制走的代码始终一致，不存在预览和结果对不上的情况。需要说明的是，border-radius 每个角本可以再拆成水平、垂直两个半径（用斜杠写成椭圆角），本工具走的是每角单个像素值这一档，输出的是正圆弧角。全部计算在浏览器本地完成，不上传任何数据。

最常见的用法是给卡片、按钮、输入框这类容器做统一圆角，联动模式下填个 6 到 12px，四角一起圆，符合多数设计规范。单独调节则用来做特定造型：比如聊天界面的气泡，把朝向头像那一侧的某个角设得很小甚至为 0、其余三角设大，就是常见的“缺一角”气泡；再比如标签页只圆上面两个角、下面两角保持直角，贴在容器边缘看着才自然。边调边看圆角预览，比在编辑器里盲写数字要快得多。

有几个点容易踩坑。一是四值简写的顺序是顺时针从左上开始，不是按对角走，写错顺序会导致圆的角对不上位置。二是当某个角的半径超过盒子对应边长的一半时，浏览器会自动把它收窄到最大值（比如给一个 40px 高的盒子设 30px 圆角，实际封顶在 20px），数值填得再大也只是变成半圆或胶囊形，不会更圆。三是做正圆头像那种效果，实践中通常写 border-radius: 50%（百分比随盒子尺寸缩放），而本工具输出的是固定像素值，遇到这种需求可以把生成的 px 手动改成 50%。这些都属于 border radius 本身的规则，和工具无关。

CSS圆角生成器是一个免费的在线工具，打开网页就能用，不用下载也不用注册。平时大家搜的“border-radius生成”、“css圆角”、“圆角生成器”，说的都是这个。