CSS3邊框
CSS3?邊框
CSS3 邊框
用CSS3，你可以建立圓角邊框，加入陰影框，並作為邊界的形象而不使用設(shè)計(jì)程序，如Photoshop。
在本章中，您將了解以下的邊框?qū)傩裕?/p>
Border-color(設(shè)定邊框顏色)
?Border-image(透過(guò)圖片設(shè)定為邊框)?
Border-radius(邊框的半徑)?
box-shadow(陰影效果)
而我使用的瀏覽器版本為:IE8,? FireFox10.0.9,? Chrome?22.0.1229.94 ，?Safari 5.1.7， Opera 12.50。 。 ?；旧隙际亲钚掳姹?
程式設(shè)計(jì)環(huán)境:VS2010旗艦版? ASP.NET
我們之前要給一個(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>既然我們已經(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-colorborder-right-colorborder-bottom-colorborder-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>有人會(huì)問(wèn)了，為什麼前面加了個(gè)-moz-，這個(gè)可以透過(guò)點(diǎn)擊傳送門(mén)了解.
看完《傳送門(mén)》後，我們?cè)趯?duì)程式碼做寫(xiě)修改.
.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)逐一解析.
border-image-source
這個(gè)是指定border的背景圖的url, 例
border-image-source ：url(../images/border.gif );
這裡可以設(shè)定為none,也就是無(wú)背景圖
border-image-slice
設(shè)定圖片如何切割的屬性，（重點(diǎn)理解）他的值是四個(gè)數(shù)值, 沒(méi)單位(實(shí)際上是已經(jīng)固定是px了, 注意, 這個(gè)值不能是負(fù)值或大於圖片的尺寸), 例如: border-image-slice:1 2 3 4; 你想得沒(méi)錯(cuò), 同樣對(duì)應(yīng)的是”上右下左」,將這幾個(gè)數(shù)值, 把背景圖片, 切割開(kāi)來(lái),具體一會(huì)再說(shuō)
border-image-width
定義border-image的width, 這個(gè)是定義border- image的顯示區(qū)域的(這個(gè)只是在w3c上描述的, 但在實(shí)際測(cè)試過(guò), 設(shè)定這個(gè)屬性沒(méi)有作用, 但是border-width能生效)
border-image-repeat;
repeat有三個(gè)值選擇
[ stretch | repeat | round ]：拉伸| 重複| 平鋪(其中stretch是預(yù)設(shè)值。)
好了，我們回頭來(lái)看slice,也就是切割.= =說(shuō)實(shí)話(huà)，不知道該怎麼講,還是上圖吧.
嗯- -在這裡我要藉別人的2張圖，因?yàn)槲矣谩府?huà)圖」花了好久，實(shí)在看不下去。 。 。最討厭畫(huà)畫(huà)了.
左上圖是一個(gè)這樣的樣式.border-image-slice:10 15 20 25; 他會(huì)將圖片分割為右上邊這樣的9宮格圖片.
left,top,right,bottom分別是你設(shè)定的距離，這一部分會(huì)被抽取出來(lái)作為邊框.
top-left,? top-right, bottom- left, bottom-right同樣會(huì)被抽取出來(lái)，與left,top,right,bottom不同的是，他們不會(huì)受repeat,stretch,round的影響.
而left,top,right,bottom,則有可能因?yàn)槔焓颤N的而改變寬度和高度.不知道這樣說(shuō)會(huì)不會(huì)容易理解點(diǎn)?
下面看代碼
<html>
<head>
<style type="text/css">
.border_test
{
-webkit-border-image: url(6.jpg) 0 12 0 12 stretch stretch;
-moz-border-image: url(6.jpg) 0 12 0 12 stretch stretch;
-o-border-image: url(6.jpg) 0 12 0 12 stretch stretch;
-ms-border-image: url(6.jpg) 0 12 0 12 stretch stretch;
-border-image: url(6.jpg) 0 12 0 12 stretch stretch;
display: block;
border-width: 0 12px;
padding: 10px;
text-align: center;
font-size: 16px;
text-decoration: inherit;
color:white;
}
</style>
</head>
<body>
<div class='border_test'>CSS3 Border-image樣式</div>
</body>
</html>Border-radius
終於到圓角了，感覺(jué)花了那麼多字去寫(xiě)css3有點(diǎn)怪，因?yàn)楸緛?lái)很簡(jiǎn)單的- -哈
#border-radius
參數(shù):半徑，不可以是負(fù)數(shù)，為0的話(huà)是直角
<html>
<head>
<style type="text/css">
.border_test
{
border:5px solid red;
-moz-border-radius:15px;
-ms-border-radius:15px;
-wekit-border-radius:15px;
-o-border-radiuss:15px;
border-radius:15px;
}
</style>
</head>
<body>
<div class='border_test'>CSS3 Border-radius樣式</div>
</body>
</html>圓角效果是比較常見(jiàn)的，而且在FireFox,Chrome,Safari,Opera都支持圓角效果，可惜IE還是只能回老家喝粥.不過(guò)據(jù)說(shuō)IE9支持了。沒(méi)4過(guò).
相關(guān)屬性： border-top-right-radius , border-bottom-right-radius , border-bottom-left-radius , border-top-left-radius
#分別對(duì)應(yīng)一個(gè)位置，要注意的是，如果只有一個(gè)，會(huì)變成4分之1圓角，如果這4個(gè)裡其中一個(gè)為0，那就回變成直角- -這個(gè)我也很納悶.
box-shadow
最後一個(gè)，陰影
<html>
<head>
<style type="text/css">
.border_test
{
border:5px solid red;
-moz-box-shadow:5px 2px 6px black;
-ms-box-shadow:5px 2px 6px black;
-wekit-box-shadow:5px 2px 6px black;
-o-box-shadow:5px 2px 6px black;
box-shadow:5px 2px 6px black;
}
</style>
</head>
<body>
<div class='border_test'>CSS3 Border-shadow樣式</div>
</body>
</html>三個(gè)像素值和顏色分別是
??陰影水平偏移值（可取正負(fù)值）；陰影垂直偏移值（可取正負(fù)值）；陰影模糊值；陰影顏色
還是IE回家喝粥，其他都可以。鬱悶
CSS3-BORDER 也講完了，第一次寫(xiě)博客，寫(xiě)得感覺(jué)很差，不過(guò)以後自己忘記也好找點(diǎn)。
CSS3確實(shí)是個(gè)好東西，還有很多東西沒(méi)有寫(xiě)出來(lái)。不過(guò)確實(shí)值得學(xué)習(xí)。 。
把DEMO也放上來(lái)吧。
