html - 不透明 html 边框的双边框问题

Question

我遇到了一个问题，不透明的边界被绘制在彼此之上，导致 alpha 是它应该的两倍。

它似乎只影响第一个 n-1 元素——最后一个子元素渲染良好。

Codepen 示例: http://codepen.io/anon/pen/vEyeBG?editors=110

HTML:

<h2>Prices</h2>

<table class="prices">
  <tbody>
    <tr>
      <td>Bananas</td>
      <td>$1/lb</td>
    </tr>
    <tr>
      <td>Oranges</td>
      <td>$4/lb</td>
    </tr>
    <tr>
      <td>Peaches</td>
      <td>$2/lb</td>
    </tr>
  </tbody>
  <tbody>
    <tr>
      <td>Carrots</td>
      <td>$1/lb</td>
    </tr>
    <tr>
      <td>Lettuce</td>
      <td>50¢/head</td>
    </tr>
    <tr>
      <td>Broccoli</td>
      <td>$1/head</td>
    </tr>
  </tbody>
</table>

CSS:

body {
  background:#000;
  color:#fff;
  font-weight:bold;
  padding:50px;
}

.prices {
    width: 400px;
    border-collapse:collapse;
    border-top: 2px solid rgba(255,255,255,.2);
}

.prices tbody tr:first-child td {
  padding-top: 12px;
}

.prices tbody tr:last-child td {
            padding-bottom: 12px;
            border-bottom : 2px solid rgba(255,255,255,.2);
        }
    }
}

Answer 1

它似乎是 border-collapse: collapse; 属性。删除它并添加 border-spacing: 0; 而不是

.prices {
  width: 400px;
  border-spacing: 0; <-----------
  border-top: 2px solid rgba(255,255,255,.2);
}

CODEPEN