safari 浏览器的底部边框渐变支持

Question

有没有办法支持safari浏览器的底部边框渐变，只有safari浏览器不支持这个

 h2 {
    color: #606060;
    font-size: 40px;
    display: inline-block;
    position: relative;
}
 h2::after {
    content: '';
    position: absolute;
    left: 10%;
    display: inline-block;
    height: 1em;
    width: 80%;
    border-bottom: 3px solid;
    border-image: linear-gradient(to right, #CA49D9, #2452A2);
    border-image-slice: 1;
    opacity: 0.6;
    margin-top: 15px;
}

<h2>How it works</h2>

这是 safari 的输出

Answer 1

我向 0px 添加了其他边框属性（左、右和上），它在所有浏览器中都有效。这里是fiddlehttp://jsfiddle.net/Aravi/1da8nx5g/1/

h2 {
    color: #606060;
    font-size: 40px;
    display: inline-block;
    position: relative;
}
 h2::after {
    content: '';
    position: absolute;
    left: 10%;
    display: inline-block;
    height: 1em;
    width: 80%;
    border-bottom: 3px solid;
    border-image: linear-gradient(to right, #CA49D9, #2452A2);
    border-image-slice: 1;
    opacity: 0.6;
    margin-top: 15px;
    border-left: 0px;
    border-right: 0px;
    border-top: 0px;
}

<h2>How it works</h2>

safari 浏览器的底部边框渐变支持

Bottom border gradient support for safari browser

css

browser

safari

gradient

compatibility