CSS3 Border屬性介紹

經過邊框屬性，咱們能夠實現一些相似按鈕或者背景圖片的替代效果。由於大量的圖片素材對網頁的加載速度影響也很大，可是因爲如今的瀏覽器對css3的兼容與支持各有不一樣，因此如今要用css替代 配合圖片達到的效果仍是不太現實。

言歸正轉，來看看css3下 border提供了那些新特性。

一、border-color

<style type="text/css">
<!--
.border-style1 {
border: 8px solid #000;
-moz-border-top-colors: #555 #666 #777 #888 #999 #aaa #bbb #ccc;
-moz-border-right-colors: #555 #666 #777 #888 #999 #aaa #bbb #ccc;
-moz-border-bottom-colors: #555 #666 #777 #888 #999 #aaa #bbb #ccc;
-moz-border-left-colors: #555 #666 #777 #888 #999 #aaa #bbb #ccc;
padding: 5px 5px 5px 15px;
}
-->
</style>
<div class="border-style1">只有在Firefox3.0以上版本瀏覽器中能看到邊框顏色漸變效果，其餘瀏覽器中爲純黑色邊框</div>

二、border-p_w_picpath

<style type="text/css">
<!--
.border-style2 {
-webkit-border-p_w_picpath: url(img/bt_blue.png) 0 12 0 12 stretch stretch;
-moz-border-p_w_picpath: url(img/bt_blue.png) 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;+color:black;
}
-->
</style>
<div class="border-style2">在safari3+、Chrome和FF3.5瀏覽器裏能看到邊框背景圖</div>

使用這種圖片配合css     能夠實現以下效果 

三、border-radius 

border-radius: 11px 11px 11px 11px; 順序： 左上、右上、右下、左下      值越大，對應的圓角越大

<style type="text/css">
<!--
.border-style3 {
border-width: 1px;
border-style: solid;
border-color: #f00;
-moz-border-radius: 11px;
-khtml-border-radius: 11px;
-webkit-border-radius: 11px;
border-radius: 11px;
padding:5px;background:#ddd;
}
-->
</style>
<div class="border-style3">在safari3+、Chrome和FF3.5瀏覽器裏能看到圓角邊框</div>

四、box-shadow

-moz-box-shadow:5px 2px 6px #000; 5px: 與左邊線相對距離 2px: 與上邊線相對距離 6px: 陰影擴散像素     #000 爲陰影顏色

<style type="text/css">
<!--
.border-style4 {
-webkit-box-shadow:5px 2px 6px #000;
-moz-box-shadow:5px 2px 6px #000;
padding:4px 10px;
background:#ddd;
}
-->
</style>
<div class="border-style4">在safari3+、Chrome和FF3.5瀏覽器裏能看到邊框陰影</div>

如將擴散像素調大至16px 陰影顏色換爲紅色  則有以下效果

 

因爲國內的ie比重一直較大，甚至至關一部分仍是ie6 ，因此若是要是考慮到兼容行的化，採用css3處理border特效仍是不太合適的