Question

当角落的两个相邻边有不同的颜色时，是否有办法影响渲染var One = 10; var Two = 20; var Three = 30; function altStats(values) { var temp = values[0]; values[0] = values[1]; values[1] = temp; return values; } [One, Two] = altStats([One, Two]); console.log("One: " + One); // 20 console.log("Two: " + Two); // 10 console.log("Three: " + Three); // 30（或在我的情况div）的角点像素？

在我看来，无论我标记什么重要，所以角落总是得到侧面的颜色。但我想使用边框顶部颜色作为角点像素。

在下面的示例中，为第一行提供一个连续的黑色边框，并将单元格与丑陋的红色分开，而其余的表格则只是灰色。

＆＃13;

th

＆＃13;

table {
  border-collapse: collapse;
  text-align: center;
}

table tr td {
  border: 8px solid grey;
}

table tr:first-child {
  border: 8px solid black;
}

table tr th:not(:last-child) {
  border-right: 8px solid red;
}

table tr:not(:first-child) td {
  border-top: 0;
}

＆＃13;

我还尝试删除I want: <table> <tr> <th> black-bordered </th> <th> row </th> <th> separated </th> <th> with </th> <th> reds </th> </tr> <tr> <td> everything </td> <td> below </td> <td> it </td> <td> simply </td> <td> grey </td> </tr> </table>，为border-collapse元素设置边框，并为tr设置边框并设置th （我刚刚发现）为零。但是border-spacing边框根本没有显示出来，它会使桌子的其余部分混乱（虽然可以修复）。

Answer 1

您可以使用pseudo element来获取它们，这将是整个row + borders的大小。然后重新应用顶部和底部边框。

＆＃13;

table {
  border-collapse: collapse;
  text-align: center;
}

table tr td {
  border: 8px solid grey;
  border-top: none;
}

table tr:first-child {
  border: 8px solid black;
}

table tr th:not(:last-child) {
  border-right: 8px solid red;
}

table tr th {
  position: relative;
}

table tr th::before {
  content: "";
  position: absolute;
  top: -8px; left: -8px;
  width: calc(100% + 16px); height: 100%;
  border-width: 8px 0;
  border-color: black transparent;
  border-style: solid;
}

＆＃13;

I want:
<table>
  <tr>
    <th> black-bordered </th>
    <th> row </th>
    <th> separated </th>
    <th> with </th>
    <th> reds </th>
  </tr>
  <tr>
    <td> everything </td>
    <td> below </td>
    <td> it </td>
    <td> simply </td>
    <td> grey </td>
  </tr>
</table>

＆＃13;

如何给表格边框的边角上下边框的颜色而不是左/右边框的颜色

1 个答案: