1

我在我的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>
4

1 回答 1

0

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/

于 2012-07-10T07:42:14.547 回答