css3使邊框具有漸變的效果

css3中border-color屬性包含有border-top-color, border-right-color, border-bottom-color , border-left-color四條邊的屬性設置。

使用CSS3的border-radius屬性,可以設置邊框不同的顏色。

如果你設置了border的寬度是X px,那麼你就可以在這個border上使用X種顏色,每種顏色顯示1px的寬度。如果說你的border的寬度是10個像素,但是隻聲明瞭5或6種顏色,那麼最後一個顏色將被添加到剩下的寬度。

例子:

<!DOCMENT HTML>
<html>
    <head>
        <style>
            #one{width:300px;height:50px;border:10px solid green;-moz-border-bottom-

colors: #555 #666 #777 #888 #999 #aaa #bbb #ccc;-moz-border-top-colors: #555 #666 #777 #888 #999

#aaa #bbb #ccc;-moz-border-left-colors: #555 #666 #777 #888 #999 #aaa #bbb #ccc;-moz-border-right-

colors: #555 #666 #777 #888 #999 #aaa #bbb #ccc;}
        </style>
    </head>
    <body>
        <div id="one"></div>
    </body>

</html>


發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章