CSS border-color 邊框顏色

CSS border-color 是用來設定邊框顏色的,例如常常用來設定 DIVspan 的邊框顏色,他可以一次設定四個邊框的顏色都一樣,也可以分別設定各個邊框的顏色,另外可以搭配 border-style(邊框樣式)、border-width(邊框寬度)來呈現不同的風格,需要注意的是如果邊框寬度為零(border-width:0px)、邊框樣式為 none 或 hidden(border-style:none 或 border-style:hidden)都不會顯示邊框顏色。

CSS border-color 基本語法
描述語法
一次設定四個邊框的顏色border-color: 顏色;
分別設定四的邊框的顏色border-color: 上邊框顏色 右邊框顏色 下邊框顏色 左邊框顏色;
分別設定上下邊框以及左右邊框border-color: 上下邊框顏色 左右邊框顏色;

常用的語法技巧有上表中的三種,若四的邊框的顏色都是一樣的,就用第一種簡易的語法,一次規定四邊的顏色,未來管理也比較容易,若要設計出四個邊都不同顏色,則必須使用第二種語法,顏色依序為上、右、下、左,這是 CSS 的標準順序,無法更改。

CSS border-color 範例一、設定四個邊框的顏色都一樣
<div style="border-color:#aaaaee;border-width:3px;border-style:solid;padding:5px;">
測試四個邊都是一樣的顏色
</div>
以上範例輸出結果如
測試四個邊都是一樣的顏色
以上範例中最重要的是「border-color:#aaaaee;」用來設定邊框的顏色,你也可以使用色碼表來找其他不同的顏色(開啟色碼表),另外我們還使用了 border-width 來增加邊框的寬度、border-style 顯示邊框的樣式以及 padding 增加文字與邊框間的距離,這些屬性都只是用來讓範例更清楚呈現,另外也讓瀏覽器知道我們想要呈現的風格。

CSS border-color 範例二、分別設定各個邊框的顏色,語法如下
<div style="border-color:blue red green yellow;border-width:3px;border-style:solid;padding:5px;">
測試四個邊都是不一樣的顏色
</div>
範例呈現結果如
測試四個邊都是不一樣的顏色
代表的意思是上邊框藍色、右邊框黑色、下邊框紅色、左邊框綠色。如果上下相同顏色,左右相同顏色,也可以用簡化的寫法來達到,看看下方這個範例馬上了解。

CSS border-color 範例三、上下相同顏色以及左右相同顏色的邊框
<div style="border-color:blue yellow;border-width:3px;border-style:solid;padding:5px;">
上下相同顏色以及左右相同顏色的邊框
</div>
範例呈現結果如
上下相同顏色以及左右相同顏色的邊框
範例中「border-color:blue yellow;」這樣的寫法代表上下邊框都是藍色,左右邊框都是黃色。border-color 的値不一定是英文,可以直接給色碼(通常也是這樣),另外 border-color 有個値是 transparent,代表的是透明邊框,但是在 IE6 或是更老舊的 IE 版本並不支援,所以盡量不要使用比較好,如果不要顯示邊框,可以直接透過 border-widthborder-style 來達到。

延伸閱讀
© Copyright wibibi.com 網頁設計教學百科 基礎的網頁設計規劃、資料庫與程式設計 Since 2012 Englsih version
PHP Smarty MySQL JQuery Apache W3C