border-bottom-color
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.
border-bottom-color
是一種 CSS 屬性,用來設定元件下側邊框的顏色。也可由含括此屬性功能的簡寫屬性 border-color
或 border-bottom
設定該屬性值。
嘗試一下
語法
css
/* <color> values */
border-bottom-color: red;
border-bottom-color: #ffbb00;
border-bottom-color: rgb(255, 0, 0);
border-bottom-color: hsla(100%, 50%, 25%, 0.75);
border-bottom-color: currentcolor;
border-bottom-color: transparent;
/* Global values */
border-bottom-color: inherit;
border-bottom-color: initial;
border-bottom-color: revert;
border-bottom-color: revert-layer;
border-bottom-color: unset;
border-bottom-color
只能宣告一個屬性值。
屬性值
<color>
-
定義下側邊框色彩。
Formal definition 標準定義
預設值 | currentcolor |
---|---|
Applies to | all elements. It also applies to ::first-letter . |
繼承與否 | no |
Computed value | computed color |
Animation type | a color |
Formal syntax 語法規則
範例
簡易邊框範例
HTML
html
<div class="mybox">
<p>
這是一個帶有框線的方框。 請注意某側框線顏色已設為
<span class="redtext">紅色</span>。
</p>
</div>
CSS
css
.mybox {
border: solid 0.3em gold;
border-bottom-color: red;
width: auto;
}
.redtext {
color: red;
}
成果
規範
Specification |
---|
CSS Backgrounds and Borders Module Level 3 # border-color |
瀏覽器相容性
BCD tables only load in the browser
參見
- 與框線相關的簡寫屬性:
border
、border-bottom
、border-color
。 - 與顏色相關的其他框線屬性:
border-right-color
、border-top-color
、border-left-color
。 - 與同側框線相關的其他屬性:
border-bottom-style
、border-bottom-width
。