CSS border-radius 生成器

完整语法：border-radius: <左上> <右上> <右下> <左下> / <水平> <垂直>;。 斜杠前为水平半径，斜杠后为垂直半径。简写规则遵循 CSS 标准：1 个值表示四角统一， 2 个值为（左上右下 / 右上左下），3 个值为（左上 / 右上左下 / 右下），4 个值为（左上 / 右上 / 右下 / 左下）。 例如 border-radius: 10px 20px 30px 40px / 20px 10px 40px 30px 表示四角椭圆。

px（像素）：固定圆角半径，与元素尺寸无关。例如 border-radius: 12px 在小元素和大元素上都呈现 12 像素的圆角。
%（百分比）：相对于元素自身宽高计算。例如 border-radius: 50% 会让正方形元素变成圆形、矩形元素变成椭圆。50% 是制作圆形头像、徽章的关键技巧。 混合使用：border-radius: 50% 10px 也合法，但通常选择一种单位保持一致性。

对于正方形元素（宽高相等），设置 border-radius: 50% 即可变成圆形。 也可以使用 border-radius: 999px 或更大的固定值，效果相同（超出元素半径时会被裁剪）。 注意：如果元素是矩形（宽高不等），50% 会产生椭圆而非圆形。 制作圆形头像的常见做法：固定宽高为相同值（如 48x48），再设置 border-radius: 50%。

胶囊形（pill / capsule）是左右两端为半圆的矩形按钮，常见于标签、按钮、徽章。 实现方式：border-radius: 999px（或任意大于元素高度一半的值）。 浏览器会自动将圆角半径裁剪到元素高度的一半，从而形成完美的半圆端。 这种写法比精确计算 height / 2 更简洁，且响应式布局下无需重新计算。

四角独立模式允许每个角设置不同的圆角半径，常用于：
① 装饰性卡片：左上右下圆角大、右上左下圆角小，形成动感的斜向构图
② 对话气泡：仅在某一角保留小圆角模拟"尖角"
③ 折叠卡片：顶部圆角、底部直角，模拟撕下的便签效果
④ 波浪边：对角交替圆与直角，形成波浪轮廓（见预设"波浪"）
本工具的"四角独立"模式提供 4 个独立滑块，可自由组合任意圆角配置。

椭圆八值模式用于制作椭圆形圆角，每个角的水平半径与垂直半径独立控制。 语法：border-radius: 100% 100% 100% 100% / 50% 50% 50% 50%， 斜杠前为四个角的水平半径，斜杠后为四个角的垂直半径。常见应用：
① 椭圆头像：宽高不等的矩形元素，设置 100% / 50% 形成椭圆
② 叶子形状：左右两端尖锐、上下圆润
③ 拱形：仅顶部圆角，模拟隧道入口
本工具的"椭圆八值"模式提供 8 个独立滑块，覆盖最复杂的圆角组合。

border-radius 是 CSS3 的成熟特性，所有现代浏览器（Chrome、Firefox、Safari、Edge） 全面支持，IE9+ 也已支持基本语法。百分比单位、四角独立、椭圆八值（斜杠语法）在 IE9+ 均可用。 旧版浏览器（IE8 及以下）需要 -webkit-、-moz- 前缀， 现代项目无需前缀可直接用于生产环境。百分比值在某些极端情况下（如嵌套元素）可能产生意外渲染， 建议关键场景测试主流浏览器。

一般情况下 border-radius 性能优秀，不会成为性能瓶颈。但需注意：
① 避免超大圆角配合动画：圆角半径超过元素尺寸时，浏览器需要计算裁剪路径， 配合 transition / animation 可能引发重绘开销
② 避免与 box-shadow 叠加滥用：圆角 + 阴影 + 透明度同时使用时， 浏览器需要为每帧重新计算阴影路径，可能影响滚动流畅度
③ 避免 % 单位与响应式布局过度动画：百分比随元素尺寸变化， 响应式断点切换时圆角会突变
正常使用（卡片、按钮、头像）完全无性能问题。

不会。本工具完全在浏览器内运行，所有圆角参数调节与 CSS 生成由 JavaScript 在你本地执行， 不会发送任何配置或代码到服务器。全程零网络请求，可离线使用。