Question

我使用不透明度参数用于rgba颜色，只有last-child元素提供我想要的颜色，每隔一个边框显示不同的颜色。您甚至可以通过devtools中的colorpicker进行测试。

＆＃13;

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);

}

＆＃13;

<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>

＆＃13;

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;
}

工作演示：

＆＃13;

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;
}

＆＃13;

<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>

＆＃13;

Answer 2

哇哇哇哇哇哇哇哇哇哇哇哇哇哇哇哇哇哇哇哇哇哇

您可以在这些行上尝试使用box-shadow：

.content > table > tbody > tr.topic {
  box-shadow: 0px 1px rgba(16, 151, 255, 0.41);
}

Answer 3

这是一个已知错误（请参阅https://bugs.chromium.org/p/chromium/issues/detail?id=312121）

您的选择是保留alpha设置，因为其他浏览器应该正确呈现它并等待修复或暂时只使用rgb值。

或者~~拉斯洛建议，使用盒子阴影。

Answer 4

将边框颜色从rbg更改为hexa

body {
  background-color: black;
}
.content > table {
  width: 100%;
  border-collapse: collapse;
  color: white;
}
.content > table > tbody > tr.topic {
  height: 50px;
  border-bottom: 1px solid #0f97ff;

}

<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>

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

4 个答案: