开发者免费本地运行
CSS 边框半径生成器
直观地设计 CSS 边框半径——均匀、单角和椭圆——带实时预览。
预览
CSS
border-radius: 16px;模式
单位
按角模式独立控制每个角；椭圆分离水平和垂直半径。
关于CSS 边框半径生成器
Handytool 的边框半径生成器让您用滑块而不是猜测来塑造元素的角。使用均匀模式实现简单的圆形框，使用单角模式构建不对称的药丸形状，或使用椭圆模式为每个角分割水平和竖直半径以实现有机斑点形状。预览实时更新，CSS 声明一键即得。
CSS 边框半径生成器功能
- 01
均匀和单角模式
均匀模式对每个角应用一个半径。单角模式独立控制左上、右上、右下和左下——药丸、叶子和不对称标签形状只需点击几下。
- 02
椭圆（X/Y）角
切换椭圆模式为每个角指定水平和竖直半径——CSS 支持的语法，用于有机的斑点形状。
- 03
三种单位
在像素、百分比和 rem 之间切换。百分比值创建真正的椭圆，随方框缩放；rem 值跟踪根字体大小以实现可访问性。
CSS 边框半径生成器常见问题
- 像素和百分比有什么区别？
- 像素半径是绝对的——16px 角总是 16px。百分比半径相对于元素的宽度和高度，所以 50% 在方形框上创建完美圆形，在矩形上创建椭圆。
- 何时应使用椭圆模式？
- 当您想要在一个轴上凸起更多的角时使用椭圆模式——例如水平药丸（50%/100%）或叶形斑点形状。CSS 将其表示为 `左上-x 右上-x ... / 左上-y 右上-y ...`。
- 为什么我的百分比半径在非方形框上看起来不对？
- 边框半径上的百分比相对于对应的边：水平百分比相对于宽度，竖直相对于高度。在宽矮的框上，这意味着角拉伸成椭圆而不是完美圆弧。
- 输出在每个浏览器中都有效吗？
- 是的——边框半径和椭圆语法在包括 Safari、Firefox、Edge 和 Chrome 的所有常青版本的每个现代浏览器中都受支持。