Chrome浏览器中Border-radius‘无效果Bug’及修复方法问询

嘿，这个Chrome的表格圆角坑我太熟了！当你给table设置border-collapse: collapse时，单元格的border-radius确实会直接失效——因为这个属性会把所有单元格的边框合并成一个统一的边框层，单元格自身的圆角样式会被完全覆盖掉。

给你两个实用的修复方案，看你需求选：

方案1：用border-spacing替代border-collapse（推荐） #

这是最简洁高效的方法，放弃边框合并，改用border-spacing: 0让单元格边框紧密贴合，再通过给table设置overflow: hidden来裁剪出整体圆角：

table {
  border-spacing: 0; /* 替代border-collapse: collapse */
  overflow: hidden; /* 关键：把单元格超出table圆角的部分裁掉 */
  border-radius: 15px; /* 直接给table设置整体圆角，不用单独给单元格加类了 */
}
td {
  border: 1px solid #000;
  padding: 10px;
  background: lightgreen;
}

对应的HTML甚至可以去掉那些角落的类，更清爽：

<table>
  <tr><td>name1</td><td>value1</td></tr>
  <tr><td>name2</td><td>value2</td></tr>
</table>

方案2：用伪元素模拟边框（适合必须保留border-collapse的场景） #

如果你因为某些原因必须保留border-collapse: collapse，可以用伪元素给每个单元格模拟边框，避开原生边框合并的限制：

table {
  border-collapse: collapse;
}
td {
  position: relative;
  padding: 10px;
  background: lightgreen;
  /* 移除原生边框，用伪元素替代 */
  border: none;
}
/* 模拟单元格边框 */
td::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border: 1px solid #000;
  z-index: -1; /* 把伪元素放到单元格内容下面 */
}
/* 给角落单元格的伪元素加圆角 */
.tl::after { border-radius: 15px 0 0 0; }
.tr::after { border-radius: 0 15px 0 0; }
.br::after { border-radius: 0 0 15px 0; }
.bl::after { border-radius: 0 0 0 15px; }

这个方法能保留border-collapse的边框合并效果，同时让圆角正常显示。

亲测这两种方法在Chrome里都能完美解决问题，选哪个看你具体场景啦！

内容的提问来源于stack exchange，提问作者shmnff