CSS 圆角生成器

功能简介

CSS 圆角生成器让你直观地调整圆角，并复制最短的 CSS。可以给四个角设置同一个半径，也可以逐个设置；打开椭圆圆角后，每个角都有独立的水平和垂直半径，拖动时预览实时变化。支持 px、%、rem 和 em，也可以粘贴已有的 border-radius 值继续编辑。所有操作都在浏览器里完成。

使用方法

1. 从某个预设开始，或者沿用示例形状。
2. 选择「单位」。切换单位会换算当前数值（rem 和 em 按 16px 计算，% 相对于预览方块）。
3. 打开「四个角相同」只用一个滑块；关闭后可以分别设置「左上」「右上」「右下」「左下」。
4. 打开「椭圆圆角」后，每个角都有「水平」和「垂直」两个滑块。
5. 用「宽度」「高度」调整预览大小，然后从「CSS」卡片复制代码。需要四条独立属性时打开完整属性输出。

示例

.avatar { border-radius: 50%; }
.tab    { border-radius: 12px 12px 0 0; }
.blob   { border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%; }

小知识

• 最短写法。 输出会合并相同的值：四个角相同时只写一个值，所有角都是圆弧时省略斜杠部分。
• 百分比跟随盒子尺寸。 水平百分比相对于元素宽度，垂直百分比相对于高度，所以长方形上的 50% 是椭圆而不是圆。
• 放不下的半径 会被浏览器一起等比缩小，所以很大的 px 值能得到干净的胶囊形。
• 子元素和溢出。 圆角会裁剪背景和边框，但不会裁剪子元素内容；要裁剪盒子里的图片，加上 overflow: hidden。