border-bottom
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 ç®åå±æ§æä¸è¾¹æ¡çææå±æ§ï¼border-bottom-colorï¼border-bottom-style ä¸ border-bottom-width 设置å°äºä¸ä¸ªå£°æä¸ãè¿äºå±æ§æè¿°äºå
ç´ çä¸è¾¹æ¡æ ·å¼ã
å°è¯ä¸ä¸
border-bottom: solid;
border-bottom: dashed red;
border-bottom: 1rem solid;
border-bottom: thick double #32a1ce;
border-bottom: 4mm ridge rgba(211, 220, 50, 0.6);
<section class="default-example" id="default-example">
<div class="transition-all" id="example-element">
This is a box with a border around it.
</div>
</section>
#example-element {
background-color: #eee;
color: #8b008b;
padding: 0.75em;
width: 80%;
height: 100px;
}
ä¸ææçç®è®°å±æ§ç¸åï¼ border-bottom å®ä¹äºå®ææå¯ä»¥å®ä¹çå±æ§ï¼å³ä½¿ä»ä»¬å¹¶æ²¡æ被æ¾å¼å°å®ä¹ãå®ææææªè¢«æ¾å¼å®ä¹çåæ°é½è®¾ç½®ä¸ºäºé»è®¤å¼ï¼è¿æå³çè¿äºå¼å°è¢«å®ä¹ä¸ºï¼
border-bottom-style: dotted;
border-bottom: thick green;
å®å以ä¸ç代ç æ¯çä»·çï¼
border-bottom-style: dotted;
border-bottom: none thick green;
顺便ä¸æï¼å¨ border-bottom ä¹åå®ä¹ç border-bottom-style çå¼å æ¤è¢«å¿½ç¥äºãç±äº border-bottom-style 并没æé»è®¤å¼ï¼æªè¢«å®ä¹ç border-style åæ°çå¼å°è¢«è®¾ç½®ä¸º noneï¼ä¹å°±æ¯æ åºè¾¹æ¡ã
è¯æ³
border-bottom: 1px;
border-bottom: 2px dotted;
border-bottom: medium dashed blue;
å¼
<br-width>-
è§
border-bottom-widthã <br-style>-
è§
border-bottom-styleã <color>-
è§
border-bottom-colorã
å½¢å¼è¯æ³
border-bottom =
<line-width> ||
<line-style> ||
<color>
<line-width> =
<length [0,â]> |
thin |
medium |
thick
<line-style> =
none |
hidden |
dotted |
dashed |
solid |
double |
groove |
ridge |
inset |
outset
示ä¾
<div>This box has a border on the bottom side.</div>
div {
border-bottom: 4px dashed blue;
background-color: gold;
height: 100px;
width: 100px;
font-weight: bold;
text-align: center;
}
è§è
| Specification |
|---|
| CSS Backgrounds and Borders Module Level 3 # border-shorthands |