将淡化黑色分隔符从“-webkit-gradient”转换为 "linear-gradient"

Question

我有一个当前正在使用的渐变，我想将其从 -webkit 转换为默认的线性渐变。我已经尝试使用所有 CSS 在线生成工具来导入代码，以便查看其他浏览器特定的变体，但由于某种原因，当我导入代码时，结果部分中的渐变变成白色。

    background: -webkit-gradient(linear, 0 0, 100% 0, from(white), to(white), color-stop(50%, black));

Answer 1

使用

.sexy_line {
    background: linear-gradient(to right, white, black, white);
}

有关线性渐变的详细信息，请参阅此 MDN article。

演示

.sexy_line { 
    margin: 25px 0;
    height: 1px;
    background: black;
    background: linear-gradient(to right, white, black, white);
}

<div class="sexy_line"></div>

Answer 2

我用了 ColorZilla's Gradient Editor all 因为它吐出跨浏览器代码而且超级好用。

Convert Fading Black Separator From "-webkit-gradient" To "linear-gradient"