css - Firefox中的渐变边框

Question

我试图在 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 的边框底部属性和某些变体，但它似乎不起作用：

  -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+ */

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

提前致谢。

Answer 1

我不得不为一个站点做渐变边框。对我来说幸运的是，它只需要在两个方面。顶部边框是实心的，侧边框会向底部淡出，并且没有底部边框。这就是我所做的。

http://jsfiddle.net/aqBzd/1/

<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;
}

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

Answer 2

据我所知，Firefox 刚刚不支持边框图像中的渐变。这是打开的错误。