CSS border-color 屬性
更多“自己嘗試”的例子見下文。
定義和用法
border-color 屬性用於設定元素的四個邊框的顏色。此屬性可以包含一到四個值。
如果 border-color 屬性有四個值
- border-color: red green blue pink;
- 頂部邊框為紅色
- 右側邊框為綠色
- 底部邊框為藍色
- 左側邊框為粉色
如果 border-color 屬性有三個值
- border-color: red green blue;
- 頂部邊框為紅色
- 右側和左側邊框為綠色
- 底部邊框為藍色
如果 border-color 屬性有兩個值
- border-color: red green;
- 頂部和底部邊框為紅色
- 右側和左側邊框為綠色
如果 border-color 屬性有一個值
- border-color: red;
- 所有四個邊框均為紅色
注意： 務必先宣告 border-style 屬性，然後再宣告 border-color 屬性。元素必須先有邊框才能更改顏色。
| 預設值 | 元素的當前顏色 |
|---|---|
| 繼承 | no |
| 可動畫 | 是的。 閱讀有關可動畫的資訊 Try it |
| 版本 | CSS1 |
| JavaScript 語法 | object.style.borderColor="#FF0000 blue" Try it |
瀏覽器支援
表中的數字指定了完全支援該屬性的第一個瀏覽器版本。
| 屬性 | |||||
|---|---|---|---|---|---|
| border-color（邊框顏色） | 1.0 | 4.0 | 1.0 | 1.0 | 3.5 |
CSS 語法
border-color: color|transparent|initial|inherit;
屬性值
| 值 | 描述 | 演示 |
|---|---|---|
| color | 指定邊框顏色。有關可能的顏色值列表，請參閱 CSS 顏色值。預設顏色是元素的當前顏色 | 演示 ❯ |
| transparent | 指定邊框顏色應為透明 | 演示 ❯ |
| initial | 將此屬性設定為其預設值。閱讀關於initial | |
| inherit | 從其父元素繼承此屬性。閱讀關於inherit |
更多示例
示例
為元素的每一側設定不同的 border-color
div.ex1 {border-color: #0000ff;}
div.ex2 {border-color: #ff0000 #0000ff;}
div.ex3 {border-color: #ff0000 #00ff00 #0000ff;}
div.ex4 {border-color: #ff0000 #00ff00 #0000ff rgb(250,0,255);}
自己動手試一試 »
相關頁面
CSS 教程：CSS 邊框
HTML DOM 參考： borderColor 屬性
