Linear Gradient hr效果仅适用于Firefox

Question

我有一个看起来像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;
}

请帮忙。

Answer 1

jsFiddle Demo

使用to left

时问题已解决

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

阅读linear-gradient - CSS documentation

Answer 2

它适用于所有人。

div {
    background-image: -webkit-linear-gradient(left, 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;
}