在Firefox中的渐变边框

时间:2013-11-05 15:08:37

标签: css css3 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的边框底部属性和某些变体,但它似乎不起作用:

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

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

提前感谢。

2 个答案:

答案 0 :(得分:0)

据我所知,Firefox目前不支持边框图像中的渐变。这是open bug

答案 1 :(得分:0)

我必须为一个网站做渐变边框。幸运的是,它只需要在两面。顶部边框是实心的,侧边框将向底部淡出,没有底部边框。这就是我所做的。

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个边框,这可能不适合你,但我想我总是分享我的方法。