Press⌘+Kto search
IP: 获取中...
为效率而生, Just tools.goodssoft.com
CSS圆角生成器 - border-radius可视化工具
可视化生成复杂的border-radius，分别设置8个角的圆角。支持拖拽调整、快捷预设和一键复制CSS代码。
预览
⚡
Border Radius
CSS代码
border-radius: 16px;圆角设置
快捷预设
拖拽调整 (px)
16
16/16
16
16/16
16
16/16
16
16/16
精确输入 (px)
形状预设
# 什么是 CSS border-radius？
CSS border-radius 属性用于设置元素的外边框圆角。通过这个属性，您可以让元素的边角变得圆润， 创建更加友好和现代化的视觉效果。border-radius 可以接受一个值（所有角相同）、两个值（对角线）、 三个值或四个值（每个角独立设置）。
圆角效果在网页设计中非常常见，从简单的按钮到复杂的卡片，都可以通过调整圆角来实现不同的视觉风格。 合理使用圆角可以让界面看起来更加柔和、现代，提升用户体验。
# border-radius 语法
- 单个值: border-radius: 10px - 所有四个角都使用相同的圆角
- 两个值: border-radius: 10px 20px - 左上和右下10px，右上和左下20px
- 三个值: border-radius: 10px 20px 30px - 左上10px，右上和左下20px，右下30px
- 四个值: border-radius: 10px 20px 30px 40px - 左上、右上、右下、左下依次设置
- 椭圆角: border-radius: 10px / 20px - 水平半径10px，垂直半径20px
# 如何使用本工具
- 使用快捷预设快速应用常见圆角值
- 通过拖拽可视化控制器调整各角的圆角大小
- 在精确输入框中输入具体的像素值
- 选择形状预设应用特定的圆角组合
- 点击"复制"按钮获取生成的CSS代码
# 常见问题 (FAQ)
border-radius 支持哪些单位？
border-radius 支持多种长度单位，包括 px（像素）、em（相对于字体大小）、rem（相对于根字体大小）、 %（百分比，相对于元素尺寸）等。百分比单位特别适合创建圆形或椭圆形的效果。
如何创建完美的圆形？
要创建完美的圆形，需要将 border-radius 设置为 50%。这会让元素的每个角都使用半径为元素宽度或高度一半的圆弧， 从而形成圆形。注意：元素必须是正方形才能形成完美的圆形。
border-radius 对所有元素都有效吗？
border-radius 对大多数元素都有效，但有一个例外：当 border-collapse 为 separate 时， border-radius 对 table 元素无效。此外，某些旧版浏览器可能需要使用前缀（如 -webkit-border-radius）。