css - 线性渐变 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 演示

使用时问题已解决to left

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

阅读线性渐变 - CSS 文档

Answer 2

它在所有方面都有效。

分区 {
    背景图像：-webkit-linear-gradient（左，透明，rgba（0, 0, 0, 0.1），透明）；
    背景图像：-moz-linear-gradient（左中心，透明，rgba（0,0,0,0.1），透明）；
    背景图像：-ms-线性渐变（左中心，透明，rgba（0,0,0,0.1），透明）；
    背景图像：-o-linear-gradient（左中心，透明，rgba（0,0,0,0.1），透明）；
    背景图像：线性渐变（左中心，透明，rgba（0,0,0,0.1），透明）；
    边框：0 无；
    高度：1px；
    边距：20px 0 40px；
}