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

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

1 个答案: