Css firefox中的渐变边框

我试图在firefox中创建渐变边框，但运气不好，在chrome中，它显示得非常完美，代码如下：

#navigationBarContainer ul li {
    text-transform:uppercase;
    font-family: optima;
    font-size:23px;
    text-align: center;
    padding-top:8px;
    padding-bottom:8px;
    border-image: linear-gradient(0deg, transparent, #FFFFFF 50%, transparent) 1 0 100%;
    -webkit-border-image: -webkit-linear-gradient(0deg, transparent, #FFFFFF 50%, transparent) 1 0 100%;
    -o-border-image: -o-linear-gradient(0deg, transparent, #FFFFFF 50%, transparent) 1 0 100%;
    -moz-border-image: -moz-linear-gradient(0deg, transparent, #FFFFFF 50%, transparent) 1 0 100%;
    border-bottom-width: 2px;

我一直在尝试mozilla的border bottom属性和某些变体，但它似乎不起作用：

  -moz-border-bottom-colors: -moz-linear-gradient(left, rgba(255,255,255,0) 0%, rgba(255,255,255,0.8) 15%, rgba(255,255,255,1) 19%, rgba(255,255,255,1) 25%, rgba(255,255,255,1) 50%, rgba(255,255,255,1) 75%, rgba(255,255,255,1) 81%, rgba(255,255,255,0.8) 85%, rgba(255,255,255,0) 100%); /* FF3.6+ */

有没有一个正确的方法来完成这个？不使用图像

---

提前感谢。

据我所知，Firefox目前不支持边框图像中的渐变。这是我为一个站点做的渐变边框。幸运的是，它只需要在两面。顶部边框是实心的，侧边框将向底部淡出，并且没有底部边框。我就是这么做的

标题
身体

.盒子{
背景颜色：橙色；
左边距：20px；
边缘顶部：20px；
宽度：200px；
位置：相对位置；
边框顶部：3件纯红；
填充物：5px；
}
.box:之前.box:之后{
背景：-moz线性梯度（顶部，rgba（255,0,4,1）0%，rgba（255,0,4,0）100%）；
背景：-webkit渐变（线性、左上、左下、颜色停止（0%，rgba（255,0,4,1））、颜色停止（100%，rgba（255,0,4,0））；
背景：-webkit线性梯度（顶部，rgba（255,0,4,1）0%，rgba（255,0,4,0）100%）；
背景：-o-线性梯度（顶部，rgba（255,0,4,1）0%，rgba（255,0,4,0）100%）；
背景：-ms线性梯度（顶部，rgba（255,0,4,1）0%，rgba（255,0,4,0）100%）；
背景：线性梯度（至底部，rgba（255,0,4,1）0%，rgba（255,0,4,0）100%）；
过滤器：progid:DXImageTransform.Microsoft.gradient（startColorstr='#ff0004'，endColorstr='#00ff0004'，GradientType=0）；
内容：''；
宽度：3倍；
身高：100%；
位置：绝对位置；
排名：0；
}
.盒子：以前{
左：0；
}
.盒子：之后{
右：0；
}

---

据我所知，这种方法只适用于2个边框，这可能对您不起作用，但我想我还是会与您分享我的方法。

如果您删除

-moz

行，它是否有效？可能是

<div class = "box">
    <h1>Title</h1>
    <p>Body</p>
</div>

.box {
    background-color:orange;
    margin-left:20px;
    margin-top:20px;
    width:200px;
    position:relative;
    border-top:3px solid red;
    padding:5px;
}

.box:before, .box:after {
    background: -moz-linear-gradient(top,  rgba(255,0,4,1) 0%, rgba(255,0,4,0) 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,0,4,1)), color-stop(100%,rgba(255,0,4,0)));
background: -webkit-linear-gradient(top,  rgba(255,0,4,1) 0%,rgba(255,0,4,0) 100%);
background: -o-linear-gradient(top,  rgba(255,0,4,1) 0%,rgba(255,0,4,0) 100%);
background: -ms-linear-gradient(top,  rgba(255,0,4,1) 0%,rgba(255,0,4,0) 100%);
background: linear-gradient(to bottom,  rgba(255,0,4,1) 0%,rgba(255,0,4,0) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff0004', endColorstr='#00ff0004',GradientType=0 );
    content:'';
    width:3px;
    height:100%;
    position:absolute;
    top:0;
}

.box:before {
    left:0;
}

.box:after {
    right:0;
}