css border-color 邊框顏色

css border-color 邊框顏色屬性很簡單,只有一個重要參數,就是顏色的表示,學會怎麼用 border-color 的基本寫法,可以套用在 DIV 區塊、span 區域、表格邊框 ... 等地方,讓整個網頁變得更加美觀,而且早期用 HTML 設計網頁的時候,其實很少會去處理邊框,因為原生的 HTML 語法比較簡單,對於元素邊框要處理得很細膩並不好搞,還好現在有 CSS 的出現,用 border-color 增加網頁元素邊框真的超簡單。

CSS border-color 寫法
border-color: 顏色;
是不是很簡單呢?border-color 只有一個參數,就是顏色。為了讓剛開始學習 css 或網頁設計的朋友更清楚什麼叫做"顏色",其實就是用來表示"顏色"的碼,例如顏色的英文單字、RGB 色碼、十六進位色碼都是,css border-color 都可以接受。

css border-color 邊框顏色範例一、替 DIV 增加邊框顏色
範例一的結果長這樣
這是一個綠色邊框的區塊
有看到了嗎?範例一使用的「border-color:green;」代表邊框要用綠色呈現,你也可以嘗試改用其他種顏色設計看看。值得注意的是 css border-color 必須與 border-width、border-style 搭配在一起才會有效果,其中 border-width 是邊框的粗細、border-style 是邊框的樣式。
這兩篇的內容也會有與 border-color 搭配的範例。

css border-color 邊框顏色範例二、替表格增加邊框顏色
範例二的結果長這樣
表格欄位表格欄位
範例二的 css  style 與範例一的是完全一樣的,主要是想呈現出同樣的邊框效果,儘管用在不同的網頁元素中,css border-color 依然能夠有同樣的表現,這也是 css 厲害的地方,同樣的概念卻可以套用在不同的網頁元素。

深入研究表格邊框顏色設計,請看:修改 HTML Table 表格邊框顏色

css border-color 屬於 css border 家族的一部分,請參閱:CSS border 元素邊框設計
分享於 2014-08-26