将褪色黑色分隔符从“-webkit-gradient”转换为“linear-gradient”答案

【问题标题】：Convert Fading Black Separator From "-webkit-gradient" To "linear-gradient"将褪色黑色分隔符从“-webkit-gradient”转换为“linear-gradient”
【发布时间】：2015-10-02 20:41:52
【问题描述】：

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

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

JSFiddle Sample

【问题讨论】：

标签： html css gradient linear-gradients

【解决方案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);
}

&lt;div class="sexy_line"&gt;&lt;/div&gt;

【讨论】：

完美！我将在 5 分钟计时器过去后立即给您完成答案检查:) 还有一个问题 - 是否可以轻松地将渐变从黑色更改为透明（而不是白色）？
是的，只需将white 更改为transparent
最后猜到了，但再次感谢！
@Hybrid 没问题 :)

【解决方案2】：

我一直使用ColorZilla's Gradient Editor 所有，因为它会输出跨浏览器代码并且超级好用。

【讨论】：

很好的推荐，但在这种情况下由于某种原因它不支持导入我提供的代码:(
那是因为“to”这个词——如果你改用它，它会起作用：linear-gradient(right, white, black, white);