css - 线性渐变hr效果仅在Firefox中有效

我有一个看起来像hr线的div。
样式仅在Firefox中有效。

我创建了一个小提琴：http://jsfiddle.net/vLFN7/

<mydiv> </mydiv>
mydiv {

  background-image: -webkit-gradient(linear, left center , transparent, rgba(0, 0, 0, 0.1), transparent);
    background-image: -moz-linear-gradient(left center , transparent, rgba(0, 0, 0, 0.1), transparent);
    background-image: -ms-linear-gradient(left center , transparent, rgba(0, 0, 0, 0.1), transparent);
    background-image: -o-linear-gradient(left center , transparent, rgba(0, 0, 0, 0.1), transparent);
    background-image: linear-gradient(left center , transparent, rgba(0, 0, 0, 0.1), transparent);
    border: 0 none;
    height: 1px;
    margin: 20px 0 40px;
}

请帮忙。

最佳答案

jsFiddle Demo

使用to left时问题已解决

background-image: linear-gradient(to left, transparent,
                                  rgba(0, 0, 0, 0.1), transparent);

阅读linear-gradient - CSS documentation

关于css - 线性渐变hr效果仅在Firefox中有效，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/18539923/