HR元素设置的渐变边框未生效甚至不显示，请问代码存在什么问题？

问题原因 #

• border-image属性会覆盖border-style:dashed配置，原生border-image不支持保留虚线边框样式，这是你样式不符合预期的核心问题，你的代码本身没有拼写错误，是属性特性冲突导致的效果不对。

解决方案 #

改用background渐变组合实现渐变虚线效果，不需要使用border相关属性，修改后的代码如下：

hr.green {
    margin-top: 20px;
    margin-bottom: 20px;
    border: none;
    height: 1px;
    /* 实现虚线结构：每段实线8px，间隔8px，可根据需求调整数值 */
    background: repeating-linear-gradient(90deg, 
        transparent, 
        transparent 8px, 
        currentColor 8px, 
        currentColor 16px
    );
    /* 叠加渐变颜色，和你原来的配色完全一致 */
    -webkit-mask: linear-gradient(90deg, rgba(48, 183, 149, 1) 10%, rgba(130, 195, 65, 1) 100%);
    mask: linear-gradient(90deg, rgba(48, 183, 149, 1) 10%, rgba(130, 195, 65, 1) 100%);
}

body {
    background-color:black;
}

HTML代码不需要修改，直接沿用原来的即可：

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

内容的提问来源于stack exchange，提问作者code-8