html - 仅在右侧具有边框渐变的 div

Question

我的 css 中有一个 div，我想只在右侧应用边框渐变，这可以吗？ 其他解决方案是将图像放在右侧或在我的边框上应用图像，所有浏览器都支持该图像还是我必须将图像放入右侧的 div 中？ 这是我的 CSS 代码:

#navigation li{
    list-style:none;
}

    #navigation li{
        margin: 0;
        width:126px;
        height:40px;
        padding-left:0px;
        padding-right:0px;
        list-style:none;
        float:left;

        border-color:gradient(start=#fff, end=#000, midpoint=50%);//works? and for other browser?

    }

我的 html:

<div id="navigation">
            <ul>
                <li><a href="index.php" id="index_btn">HOME</a></li>
                <li><a href="#" id="">AZIENDA</a></li>
                <li><a href="#" id="">PRODOTTI</a></li>
                <li><a href="#" id="">PARTNER</a></li>
                <li><a href="#" id="">NEWS</a></li>
                <li><a href="#" id="">CONTATTI</a></li>
            </ul>
        </div>

Answer 1

WebKit 现在(至少是 Chrome 12)支持渐变作为边框图像:

-webkit-border-image: -webkit-gradient(linear, left top, left bottom, from(#00abeb), to(#fff), color-stop(0.5, #fff), color-stop(0.5, #66cc00)) 21 30 30 21 repeat repeat;

校对链接 -- http://www.webkit.org/blog/1424/css3-gradients/

注意:最好使用渐变边框作为跨浏览器支持的图像

有关border-image 的详细理解，请参阅此帖子:http://css-tricks.com/understanding-border-image/