CSSborder-radius圆角实现与UI示例

各位小伙伴们，大家好呀！看看今天我又给各位带来了什么文章？本文标题是《CSS border-radius 实现圆角及常见 UI 示例》，很明显是关于文章的文章哈哈哈，其中内容主要会涉及到等等，如果能帮到你，觉得很不错的话，欢迎各位多多点评和分享！

最安全的写法是单值 border-radius: 10px，四角等半径得标准圆角矩形；斜杠写法如 10px/20px 会触发椭圆模式；四值需严格按左上、右上、右下、左下顺序；超尺寸时浏览器自动限制为宽高一半；表格中需对单元格设圆角并配合 overflow: hidden 裁剪。

border-radius 基础值怎么写才不变成椭圆

直接写 border-radius: 10px 是最安全的起点，四个角等半径，浏览器会生成标准圆角矩形。但一旦你用斜杠写成 border-radius: 10px / 20px，就进入了椭圆模式：斜杠前是水平方向半径，斜杠后是垂直方向半径。很多 UI 设计稿只标一个数值，结果开发者误用斜杠写法，导致按钮上下边弧度被拉扁。

• 单值写法（推荐多数场景）：border-radius: 8px → 四角一致
• 双值写法（慎用）：border-radius: 8px / 4px → 水平 8px、垂直 4px，适合胶囊形标签
• 四值写法（精准控制）：border-radius: 4px 8px 4px 0 → 顺时针：左上、右上、右下、左下

实现「仅左上+右下圆角」的正确写法

很多人想只圆两个对角，却错误地写成 border-radius: 8px 0 0 8px（这是左上+左下），顺序错了。CSS 的四值顺序固定为「左上、右上、右下、左下」，所以要圆左上和右下，必须显式把中间两个设为 0：

button {
  border-radius: 8px 0 8px 0;
}

注意：不能省略中间值，border-radius: 8px 0 等价于 8px 0 8px 0，看似一样，但语义是「左上+右上」，右下和左下会自动继承右上和左上——这反而会圆错角。务必写满四值或用 border-top-left-radius 和 border-bottom-right-radius 单独控制。

border-radius 超过元素尺寸时会发生什么

当 border-radius 值大于元素宽高一半时，浏览器会自动限制为最大可接受值，不会报错，但视觉上可能意外变“全圆”。比如一个 width: 20px; height: 20px 的元素，设 border-radius: 50px，实际渲染就是 10px（20/2），最终是个正圆。但若宽高不等，如 width: 40px; height: 20px，设 border-radius: 20px，水平方向刚好撑满，垂直方向只能取 10px，结果是横向拉伸的椭圆——不是 bug，是规范行为。

• 想要强制正圆？确保 width === height，再设 border-radius: 50%
• 用百分比时，50% 基于盒模型的宽高分别计算，不是统一缩放
• 移动端小图标慎用大像素值，容易在不同 DPR 下边缘模糊

圆角在 border-collapse: collapse 表格里失效怎么办

表格加了 border-collapse: collapse 后，border-radius 在

table {
  border-collapse: collapse;
  overflow: hidden;
  border-radius: 8px;
}
th:first-child,
td:first-child {
  border-top-left-radius: 8px;
  border-bottom-left-radius: 8px;
}
th:last-child,
td:last-child {
  border-top-right-radius: 8px;
  border-bottom-right-radius: 8px;
}