圆角生成
可视化调 border-radius，四角可独立设置，支持 px 与百分比两种单位；调试卡片、头像、胶囊按钮的圆角一步到位。
>_ 使用指南 · GUIDE
可视化地调 border-radius，四个角彼此独立，单位可选 px 或百分比，实时预览。想做卡片、头像还是胶囊按钮的圆角，拖几下滑条就能调到想要的效果，调好一键复制 CSS。
四角独立有讲究：简写里 / 前后各带一到四组值，前一组是水平半径、后一组是垂直半径，顺序都按「左上 → 右上 → 右下 → 左下」顺时针排。只给某个角设圆角时，其余角填 0 即可。px 与百分比的差异在于：px 是固定长度，圆角大小不随元素尺寸变化；百分比按元素宽高计算，能在自适应尺寸上做出更均匀的弧度，也常用于椭圆。头像取 50% 就是正圆，胶囊按钮通常用高度的一半作圆角。
典型步骤：
- 选单位：先决定用 px 还是百分比
- 分别拖四角的滑条：逐角设定水平与垂直半径
- 查看实时预览：边调边看圆角效果
- 复制 CSS：把
border-radius复制到你的元素上
>_ 常见问题 · FAQ
Q1 · 四角独立设置的语法顺序是什么？
顺序是顺时针「左上 → 右上 → 右下 → 左下」。四个值写法 border-radius: 8px 0 0 8px; 表示左上与右下……准确说，第一个值给左上、第二个给右上、第三个给右下、第四个给左下。带上斜杠则前半为水平半径、后半为垂直半径，例如 border-radius: 10px 20px / 5px 10px;。
Q2 · 百分比圆角和 px 有什么区别？
px 是固定长度，圆角不随元素大小变化；百分比按元素的宽和高分别计算，因而在自适应布局里弧度更均匀，也更容易做出椭圆。宽高不等的元素用百分比时，水平与垂直方向的圆角会不同，这正是椭圆效果的来源。
Q3 · 怎么做正圆或圆头像？
把元素宽高设成相等，再把 border-radius 设成 50%（或 50% / 50%）即可得到正圆。若只想让图片变圆形而保持原始比例，记得配合 object-fit: cover，避免被拉伸变形。
Q4 · 胶囊按钮的圆角怎么算？
胶囊（pill）按钮的圆角取元素高度的一半即可，例如高度 40px 就用 border-radius: 20px;。用较大的 px 值也能近似，但精确取半高能保证无论字体大小，两端始终是完整半圆。
Q5 · 复制出来的 CSS 怎么用到我的元素上？
把复制到的 border-radius 属性直接贴进目标元素的样式规则里即可，例如 .card { border-radius: 12px; }。若是逐角设置，注意保持简写的顺序；在浏览器开发者工具里可以临时贴上去先看效果，再写回源码。