Question

我有一个div进入我的CSS并且我想在右边应用边框渐变是可能的吗？其他解决方案是将图像放在右边或在我的边框上应用图像，是否所有浏览器都支持或者我必须将图像放入我右边的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;

Prooflink - http://www.webkit.org/blog/1424/css3-gradients/

注意：最好将渐变边框用作跨浏览器支持的图像

详情请参阅此帖子了解border-image谅解：http://css-tricks.com/understanding-border-image/

div仅在右侧有渐变渐变

1 个答案: