如何将渐变应用于表格行边框？

Question

在 header 上，我使用了一个伪元素来创建这个渐变边框。 这是我的代码：

.wrapper::before {
    z-index: 1000;
    content: "";
    position: absolute;
    height: 106px;
    inset: 0;
    border-radius: 20px;
    padding: 2px; 
    background:linear-gradient(90deg,#4757e370,#5b2bdf70); 
  }

现在我想在我的表格行边框上使用相同的渐变。 我怎样才能做到这一点？ 不知何故，我无法在我的 td-childs 上应用伪元素。 遗憾的是，我不知道如何在边框上应用渐变。 有人知道该怎么做吗？

谢谢：）

Answer 1

如果适合您，您可以做一些与您对伪元素所做的非常相似的事情。 您只需将tr元素设置为显示为块

 :root { --bg-color: hsl(231deg 23% 11%); } body { background-color: var(--bg-color); } table { outline: 1px solid blue; width: 100%; } tr { --br: 20px; --border-size: 4px; display: block; height: 1rem; margin: 0.7rem; position: relative; border-radius: var(--br); background-color: var(--bg-color); } tr::before { z-index: -1; content: ""; position: absolute; inset: calc(-1 * var(--border-size)); border-radius: var(--br); background:linear-gradient(90deg,#4757e370,#5b2bdf70); }

 <table> <tr></tr> <tr></tr> <tr></tr> <tr></tr> <table>

也值得检查这个问题，它可能会提供更深入的解释。

还值得一提的是，当我创建表格时，我很少再依赖表格样式，并且通常会默认使用网格布局样式，这使得间隙和排序更易于管理。