人力资源梯度不起作用

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

​