CSS 圆角生成器 — 可视化
用四个角滑块(px 或 %、支持椭圆)可视化制作 CSS 圆角:实时预览并复制可用代码——在浏览器中完成。
🔒 全部在你的浏览器中运行。输入和输出都不会发送到服务器或被保存,十分安全。
这个工具有用吗?点一下表达心情
关于此工具
这款 border-radius 生成器让你以可视化的方式为方框设置圆角,并复制精确的 CSS。你可以同时拖动四个角的滑块,或单独调整每一个角,在像素和百分比之间切换,甚至用各自独立的水平和垂直数值设置椭圆形圆角。实时预览会随操作更新,下方则显示可直接粘贴的 border-radius 规则。它是无需手写数值就能快速设计按钮、卡片和头像的方式,而且全部在你的浏览器中运行。
常见问题
以像素为单位的圆角和以百分比为单位的圆角有什么区别?
以像素为单位的圆角是固定的弧度,无论方框多大都保持相同尺寸,因此能让各元素的圆角保持一致。以百分比为单位的圆角相对于方框自身的宽和高,会随元素变大而按比例缩放。经典技巧是 border-radius: 50%,它能把正方形变成完美的圆形,把任意长方形变成椭圆——非常适合圆形头像和胶囊形按钮。
椭圆形圆角以及 CSS 中的斜杠是什么意思?
椭圆形圆角使用两个不同的半径——一个水平、一个垂直——因此弧线可以宽大于高,或反过来。在 CSS 中,这样的成对数值用斜杠书写,例如 border-radius: 40px / 20px,斜杠前的数值设定水平半径,斜杠后的设定垂直半径。它能创建单一半径无法实现的柔和、拉伸或不对称形状,而生成器会替你写好这段语法。
我可以把生成的 CSS 直接粘贴到项目里吗?
可以。工具输出的是标准的 border-radius 声明,可以直接粘贴到你的样式表中,而且所有现代浏览器都支持该属性。当你拖动时,一切都在浏览器中本地计算,因此你设计的任何内容都不会被上传——预览和生成的代码完全在你的设备上产生。复制这条规则,放进你的 CSS,需要时再调整数值即可。