标题下方有渐变条吗？

[orangeandblack5]

我们目前已设置 CSS，在标题下方显示一条横线而不是阴影：

.d-header {
  box-shadow: none;
  border-bottom: solid var(--my_header_box_color)
}

如果我们想将其设为渐变，最简单的方法是什么？我们可以让其他元素变成渐变，但这条线不行。

[Don]

你好，

我认为我会为此使用 mixin。

这是一个例子：

@mixin gradient-border() {
  border-image: linear-gradient(to right, orange, black);
  border-bottom: 5px solid;
  border-image-slice: 1;
}

然后你可以用 @include gradient-border() 在 .d-header 或你想要的地方使用它。

.d-header {
  box-shadow: none;
  @include gradient-border();
}

[orangeandblack5]

有什么办法可以解释为什么这会在手机上发生？

[orangeandblack5]

仅在移动设备上使用以下代码才有效：

    border-left: 0px solid;
    border-right: 0px solid;
    border-top: 0px solid;