CSS3中的邊框(Border). 這對(duì)我們來(lái)說(shuō)并不陌生.多少次寫(xiě)下 border:1px solid red了..那么CSS3中會(huì)給我們帶來(lái)什么驚喜呢？
在CSS3中.邊框多了4種新特性
1.Border-color(設(shè)置邊框顏色)
2.Border-image(通過(guò)圖片設(shè)置為邊框)
3.Border-radius(邊框的半徑)
4.box-shadow(陰影效果)
而我使用的瀏覽器版本為:IE8, FireFox10.0.9, Chrome 22.0.1229.94， Safari 5.1.7， Opera 12.50。。。基本都是最新版本.
我們之前要給一個(gè)div加上邊框時(shí)，我們會(huì)這樣寫(xiě)
<html>
<head>
<style type="text/css">
.border_test
{
border:5px solid red;
}
</style>
</head>
<body>
<div class='border_test'>常用的邊框樣式</div>
</body>
</html>
border-color
既然我們已經(jīng)可以設(shè)置邊框顏色了，為什么還要border-color呢？因?yàn)镃SS3的border有所不同.
使用border-color如果你設(shè)置了邊框?qū)挾仁荴。那么你就可以在這個(gè)這個(gè)邊框上使用X種顏色,每種顏色顯示1px的寬度.(ps:如果你邊框?qū)挾仁?0px,而你只設(shè)置了5種顏色，那么最后一種顏色將會(huì)填充剩下的寬度)
具體寫(xiě)法看下面代碼
<html>
<head>
<style type="text/css">
.border_test
{
border:5px solid red;
border-color:red blue green black;
}
</style>
</head>
<body>
<div class='border_test'>CSS3 Border-color樣式</div>
</body>
</html>
但是結(jié)果和我們想的并不一樣.
我們只看到了4個(gè)邊框分別對(duì)應(yīng)4種顏色.分別是 上 右 下 左。
當(dāng)然，如果我們只輸入3種顏色,中間的顏色就對(duì)應(yīng) 左和右,具體的自己試一下吧.
那么之前我們說(shuō)的每像素一種顏色的效果呢？別著急."那么你就可以在這一邊框上使用X種顏色".因?yàn)閎order-color是針對(duì)整個(gè)4條邊框的，所以不是針對(duì)某條邊框的.
如果我們需要做到上面的效果，可以針對(duì)某一條邊框設(shè)置。他們分別是:
- border-top-color
- border-right-color
- border-bottom-color
- border-left-color
所以我們需要改一下代碼
<html>
<head>
<style type="text/css">
.border_test
{
border:5px solid red;
-moz-border-top-colors:Blue Yellow Red Black Green;
-moz-border-bottom-colors:Blue Yellow Red Black Green;
-moz-border-right-colors:Blue Yellow Red Black Green;
-moz-border-left-colors:Blue Yellow Red Black Green;
}
</style>
</head>
<body>
<div class='border_test'>CSS3 Border-color樣式</div>
</body>
</html>
運(yùn)行后
效果出來(lái)了有木有?雖然看不太清楚，不過(guò)確實(shí)每個(gè)像素一個(gè)顏色了，這樣如果我們要做漸變顏色的話就方便了很多，只需要調(diào)整顏色就好了
.border_test
{
border:5px solid red;
-moz-border-top-colors:Blue Yellow Red Black Green;
-ms-border-top-colors:Blue Yellow Red Black Green;
-wekit-border-top-colors:Blue Yellow Red Black Green;
-o-border-top-colors:Blue Yellow Red Black Green;
border-top-colors:Blue Yellow Red Black Green;
}
但是卻發(fā)現(xiàn)，只有火狐上出現(xiàn)了效果，也就是說(shuō),border-邊框-colors這個(gè)屬性只有在火狐上可用，其他的不兼容.可惜了..
Border-image
border-image主要是用圖片來(lái)填充邊框.
border-image的分解屬性分別為
- border-image-source 指定border的背景圖的url
- border-image-slice 設(shè)置圖片如何切割的屬性，非定位！
- border-image-width 定義border-image的顯示區(qū)域的
- border-image-repea
下面我們來(lái)逐個(gè)解析.
border-image-source
這個(gè)是指定border的背景圖的url, 例
border-image-source ：url(../images/border.gif);
這里可以設(shè)置為none,也就是無(wú)背景圖
border-image-slice