HR梯度未生效答案

【问题标题】：HR gradient is not taking effectHR梯度未生效
【发布时间】：2021-12-09 10:00:56
【问题描述】：

我无法判断我的 HR 渐变没有生效，甚至没有显示。

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

我是不是哪里有错字？

我希望看到这样的东西。

【问题讨论】：

标签： css border gradient linear-gradients

【解决方案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">

【讨论】：

我要删除这个属性border-image-slice: 1; 吗？我看到你在最后附加了1。这是什么？
@code8888 它是边框图像切片和边框图像宽度。 border-image 是接受所有值（如背景）的速记版本
好的。愚蠢的问题，我可以让它们变暗吗？比如调整线条的不透明度？
@code8888 使用 opacity 属性？
是的，我试过了，成功了。