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 â¨2015å¹´7æâ©.
border-bottom-color å±æ§è®¾ç½®ä¸ä¸ªå
ç´ åºé¨è¾¹æ¡çé¢è²ãåºå½æåºï¼å¨å¤æ°æ
åµä¸ï¼CSS ç®åå±æ§ border-color æ border-bottom æ´æ¹ä¾¿å®ç¨ã
| åå§å¼ | currentcolor |
|---|---|
| éç¨å ç´ | ææå
ç´ . It also applies to ::first-letter. |
| æ¯å¦æ¯ç»§æ¿å±æ§ | å¦ |
| 计ç®å¼ | é¢è²è®¡ç®å¼ |
| å¨ç»ç±»å | a color |
è¯æ³
css
border-bottom-color: yellow;
border-bottom-color: #f5f6f7;
å¼
æ£å¼è¯æ³
border-bottom-color =
<color> |
<image-1D>
<image-1D> =
<stripes()>
<stripes()> =
stripes( <color-stripe># )
<color-stripe> =
<color> &&
[ <length-percentage> | <flex> ]?
<length-percentage> =
<length> |
<percentage>
示ä¾
ä¸ä¸ªå¸¦æè¾¹æ¡çç®å div
HTML å 容
html
<div class="mybox">
<p>
This is a box with a border around it. Note which side of the box is
<span class="redtext">red</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 |
æµè§å¨å ¼å®¹æ§
åè§
- è¾¹æ¡ç¸å
³ç CSS ç®åå±æ§
border,border-bottomåborder-colorã - ç¨äºå
¶ä»è¾¹æ¡é¢è²ç¸å
³ç CSS å±æ§ï¼
border-right-color,border-top-color, åborder-left-colorã - åæ ·ç¨äºåºè¾¹çå
¶ä»è¾¹æ¡ç¸å
³ç CSS å±æ§ï¼
border-bottom-styleåborder-bottom-widthã