圆角生成器
可视化生成 CSS border-radius 值。
border-radius: 8px;How to Use
- 使用四个角的滑块（左上、右上、右下、左下）独立调整每个角，或使用主滑块统一设置所有角。预览形状实时更新。
- 精细调整不对称圆角——每个角可分别设置水平和垂直半径，使用 8 值语法（如 border-radius: 30px 20px 50px 10px / 20px 40px 10px 30px），创造出超越简单圆角矩形的有机形状。
- 复制生成的 CSS border-radius 声明。可选择简写语法（1~4 值）、适用于高级形状的 8 值椭圆语法，或用于样式表精细控制的单属性写法。
Frequently Asked Questions
- 4 值语法和 8 值语法有什么区别？
- 4 值语法 border-radius: 10px 20px 30px 40px 为每个角设置统一的圆角半径（从左上角顺时针）。8 值语法 border-radius: a b c d / e f g h 为每个角分别设置水平（斜杠前）和垂直（斜杠后）半径，可实现非完美圆形的椭圆曲线。
- 如何制作完美的圆形或胶囊形状？
- 正方形元素设置 border-radius: 50% 即可获得完美圆形。胶囊形状设置 border-radius: 9999px——无论内容宽度如何，两端都会完全圆润。生成器的胶囊预设会自动应用此设置。
- border-radius 会裁剪内容吗？
- 会——border-radius 同时裁剪元素的背景和内容。如果圆角父元素内有直角子元素，需在父元素上设置 overflow: hidden 以确保整洁的裁剪效果。生成器预览包含内容区域，方便你验证裁剪行为。