Chrome中的边框半径“无错误”答案

【问题标题】：Border-radius "none-bug" in ChromeChrome中的边框半径“无错误”
【发布时间】：2018-09-13 10:31:11
【问题描述】：

如何修复 Chrome 中的 border-radius 行为？

table {
  border-collapse:collapse;
}
td {
  border:1px solid #000;
  padding:10px;
  background:lightgreen;
}
.tl {
  border-radius: 15px 0 0 0;
}
.tr {
  border-radius: 0 15px 0 0;
}
.br {
  border-radius: 0 0 15px 0;
}
.bl {
  border-radius: 0 0 0 15px;
}

<table>
  <tr>
    <td class="tl">name1</td>
    <td class="tr">value1</td>
  </tr>
  <tr>
    <td class="bl">name2</td>
    <td class="br">value2</td>
  </tr>
</table>

在 IE 中运行良好。

【问题讨论】：

这不是一个错误 :) 它在 Chrome 和 Firefox 上都可以正常工作，但它是 IE 中的一个错误......当使用边框折叠时，边框不再属于 td 元素，它们与表格边框一起折叠。 . 并且在规范中明确定义它不会被考虑：drafts.csswg.org/css-backgrounds-3/#border-radius-tables ...所以你没有问题，就像那样
@TemaniAfif 所以我更喜欢这个 IE 错误并且不同意规范：这对制作布局非常不便。
这取决于你是否同意，但正如我在评论中所说的，重要的部分是你需要了解这不是 chrome 的错误，而是正常行为;)

标签： css google-chrome

【解决方案1】：

一种解决方案，但我不喜欢这种方式

table {
  border-collapse: separate;
  border-spacing: 0px;
  border:.5px solid #000;
  border-radius: 15px;
}
td {
  border:.5px solid #000;
  padding:10px;
  background:lightgreen;
}
.tl {
  border-radius: 15px 0 0 0;
}
.tr {
  border-radius: 0 15px 0 0;
}
.br {
  border-radius: 0 0 15px 0;
}
.bl {
  border-radius: 0 0 0 15px;
}

<table>
  <tr>
    <td class="tl">name1</td>
    <td class="tr">value1</td>
  </tr>
  <tr>
    <td class="bl">name2</td>
    <td class="br">value2</td>
  </tr>
</table>

再来一个，好一点

table { 
  border-collapse: separate;
  border-spacing: 0px;
}
td {
  padding: 10px; 
  border-left: 1px solid #000;
  border-top: 1px solid #000;
  background: lightgreen;
}
td:last-child {
  border-right: 1px solid #000;
}
tr:last-child td {
  border-bottom: 1px solid #000;
}
.tl {
  border-radius: 15px 0 0 0;
}
.tr {
  border-radius: 0 15px 0 0;
}
.br {
  border-radius: 0 0 15px 0;
}
.bl {
  border-radius: 0 0 0 15px;
}

<table>
  <tr>
    <td class="tl">name1</td>
    <td class="tr">value1</td>
  </tr>
  <tr>
    <td class="bl">name2</td>
    <td class="br">value2</td>
  </tr>
</table>

【讨论】：