html - 表格行的边框半径和阴影

Question

如何将阴影应用于表格中带圆 Angular 的行？
当我将阴影框应用于行时， Angular 出现没有半径
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

像这样将边框半径应用于表格行，这将删除丑陋的 Angular 落:

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

这将使该行的所有 4 个 Angular 的半径为 10px。在您的示例中，您将框阴影应用于表格行，因此阴影的形状将是应用它的元素的形状，该元素最初是一个矩形。申请 border-radius: 10px;到表格行将改变行元素的形状，从而也改变它们产生的阴影的形状。
另外，我可以在将边框应用于数据单元格元素时看到您的逻辑，但是您这样做的方式是不必要的，您可以简单地应用 border: 1px solid #d1d1d1;到表格行元素或 .tr-body 类。