HR 梯度未生效

Question

我不知道我的心率梯度没有生效，甚至没有显示。

hr.green {
    margin-top: 20px;
    margin-bottom: 20px;
    border: 1px dashed;
    border-left: 0;
    border-bottom: 0;
    border-right: 0;
    border-image: linear-gradient(90deg, rgba(48, 183, 149, 1) 10%, rgba(130, 195, 65, 1) 100%) !important;
    border-image-slice: 1;

}


body {
background-color:black;

}

<h1>
TEST
</h1>
<hr class="green">

我是不是哪里打错了？

我希望看到这样的东西。

Answer 1

在 border-image 内添加切片，因为它还会设置此处缺少的 border-image-width：

hr.green {
  margin-top: 20px;
  margin-bottom: 20px;
  border: 1px dashed;
  border-left: 0;
  border-bottom: 0;
  border-right: 0;
  border-image: linear-gradient(90deg, rgba(48, 183, 149, 1) 10%, rgba(130, 195, 65, 1) 100%) 1;
}

body {
  background-color: black;
}

<h1>
  TEST
</h1>
<hr class="green">

HR 梯度未生效

HR gradient is not taking effect

css

gradient

border

linear-gradients