表行的边界半径和阴影

Question

如何将阴影应用于表格中带有圆角的行？当我将阴影盒应用于行时，角出现时没有半径

https://codepen.io/moonflakes/pen/eYzjOXP

table {
  border-collapse: separate;
  border-spacing: 0px 20px;
}
.first-td {
  border-top-left-radius: 10px;
  border-bottom-left-radius: 10px;
  border-bottom: 1px solid #d1d1d1;
  border-top: 1px solid #d1d1d1;
  border-left: 1px solid #d1d1d1;
}
.inner-td {
  border-bottom: 1px solid #d1d1d1;
  border-top: 1px solid #d1d1d1;
}
.last-td {
  border-bottom: 1px solid #d1d1d1;
  border-top: 1px solid #d1d1d1;
  border-right: 1px solid #d1d1d1;
  border-top-right-radius: 10px;
  border-bottom-right-radius: 10px;
}

th, td {
  padding: 1em;
  border-bottom: 2px solid white; 
}

.css-mine {
  margin-top: 2em;
  clear: both;
}

body {
  margin: 1.5em;
}
.tr-body {
  box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.2);
}

Answer 1

像这样将边框半径应用于表格行，这将消除丑陋的角落：

.tr-body {
  box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.2);
  border-radius: 10px;
}

这将使该行的所有 4 个角的半径均为 10px。在您的示例中，您将框阴影应用于表格行，因此阴影的形状将是其所应用的元素的形状，该元素最初是矩形。应用于border-radius: 10px;表格行将改变行元素的形状，从而也改变它们产生的阴影的形状。

另外，我可以看到您在将边框应用于数据单元格元素时的逻辑，但您完成此操作的方式是不必要的，您可以简单地应用于border: 1px solid #d1d1d1;表行元素或 .tr-body 类。