html - 边框颜色不透明度对表格行的作用不同

Question

我正在为 rgba 颜色使用不透明度参数，只有最后一个子元素提供我想要的颜色，每个其他边框显示不同的颜色。您甚至可以在 devtools 中通过颜色选择器对其进行测试。

body {
  background-color: black;
}
.content > table {
  width: 100%;
  border-collapse: collapse;
  color: white;
}
.content > table > tbody > tr.topic {
  height: 50px;
  border-bottom: 1px solid rgba(16, 151, 255, 0.41);

}

<div class="content">
        <table>
          <tbody>
            <tr class="topic">
              <td class="topic-title">
                <i class="topic-icon"></i>
                Title
              </td>
              <td class="topic-replies">
                <i class="replies-icon"></i>
                15
              </td>
              <td class="topic-author">
                Name
              </td>
              <td class="topic-timestamp">
                <time>20m.</time>
              </td>
            </tr>
            <tr class="topic">
              <td class="topic-title">
                <i class="topic-icon"></i>
                Title
              </td>
              <td class="topic-replies">
                <i class="replies-icon"></i>
                15
              </td>
              <td class="topic-author">
                Name
              </td>
              <td class="topic-timestamp">
                <time>20m.</time>
              </td>
            </tr>
            <tr class="topic">
              <td class="topic-title">
                <i class="topic-icon"></i>
                Title
              </td>
              <td class="topic-replies">
                <i class="replies-icon"></i>
                15
              </td>
              <td class="topic-author">
                Name
              </td>
              <td class="topic-timestamp">
                <time>20m.</time>
              </td>
            </tr>
          </tbody>
        </table>
      </div>

Answer 1

在我看来，这是 chrome 浏览器中的一个错误。

另一种方法是使用 background-image 而不是 border-bottom。

我们可以使用linear-gradient()达到同样的效果。

.content > table > tbody > tr.topic {
    background-image: linear-gradient(rgba(16, 151, 255, 0.41), rgba(16, 151, 255, 0.41));
    background-repeat: no-repeat;
    background-position: left bottom;
    background-size: 100% 1px;
}

工作演示:

body {
  background-color: black;
}
.content > table {
  width: 100%;
  border-collapse: collapse;
  color: white;
}
.content > table > tbody > tr.topic {
  height: 50px;
  background-image: linear-gradient(rgba(16, 151, 255, 0.41), rgba(16, 151, 255, 0.41));
  background-repeat: no-repeat;
  background-position: left bottom;
  background-size: 100% 1px;
}

<div class="content">
  <table>
    <tbody>
      <tr class="topic">
        <td class="topic-title">
          <i class="topic-icon"></i>
          Title
        </td>
        <td class="topic-replies">
          <i class="replies-icon"></i>
          15
        </td>
        <td class="topic-author">
          Name
        </td>
        <td class="topic-timestamp">
          <time>20m.</time>
        </td>
      </tr>
      <tr class="topic">
        <td class="topic-title">
          <i class="topic-icon"></i>
          Title
        </td>
        <td class="topic-replies">
          <i class="replies-icon"></i>
          15
        </td>
        <td class="topic-author">
          Name
        </td>
        <td class="topic-timestamp">
          <time>20m.</time>
        </td>
      </tr>
      <tr class="topic">
        <td class="topic-title">
          <i class="topic-icon"></i>
          Title
        </td>
        <td class="topic-replies">
          <i class="replies-icon"></i>
          15
        </td>
        <td class="topic-author">
          Name
        </td>
        <td class="topic-timestamp">
          <time>20m.</time>
        </td>
      </tr>
    </tbody>
  </table>
</div>