border-bottom-width
åºçº¿
广æ³å¯ç¨
èª 2015å¹´7æ èµ·ï¼æ¤ç¹æ§å·²å¨ä¸»æµæµè§å¨ä¸å¾å°æ¯æï¼å¯å¨å¤§å¤æ°è®¾å¤åæµè§å¨çæ¬ä¸æ£å¸¸ä½¿ç¨ã
CSS 屿§ border-bottom-width 设置ä¸ä¸ªå
ç´ çåºé¨è¾¹æ¡å®½åº¦ã
css
/* Keyword values */
border-bottom-width: thin;
border-bottom-width: medium;
border-bottom-width: thick;
/* <length> values */
border-bottom-width: 10em;
border-bottom-width: 3vmax;
border-bottom-width: 6px;
/* Global keywords */
border-bottom-width: inherit;
border-bottom-width: initial;
border-bottom-width: unset;
| åå§å¼ | medium |
|---|---|
| éç¨å ç´ | ææå
ç´ . It also applies to ::first-letter. |
| æ¯å¦æ¯ç»§æ¿å±æ§ | å¦ |
| 计ç®å¼ | ç»å¯¹é¿åº¦ï¼æå¦æ border-bottom-style ç弿¯ none æ hiddenï¼å为 0 |
| å¨ç»ç±»å | a length |
Syntax
>Values
- <
br-width> -
å®ä¹è¾¹æ¡å®½åº¦ï¼åå¼ä¸ºéè´ç宽度å¼
<length>æå ³é®åã妿æ¯å ³é®åçè¯ï¼å ¶åå¼å¿ é¡»æ¯ä»¥ä¸ä¹ä¸ï¼thinç»è¾¹æ¡ mediumä¸çè¾¹æ¡ thickç²è¾¹æ¡ 夿³¨ï¼å 为è§è没æå ·ä½å®ä¹æ¯ä¸ªå ³é®å对åºç宽度å¼ï¼æä»¥å®é æ¾ç¤ºææä¾èµäºå®ç°ã使¯å®½åº¦å¼çåå¼ä¸å®éµå¾ª
thin ⤠medium ⤠thickçè§å¾ä¸å¨åææ¡£ä¸æ¯å¸¸æ°ã
Formal syntax
border-bottom-width =
<line-width>
<line-width> =
<length [0,â]> |
hairline |
thin |
medium |
thick
Example
>HTML
html
<div>Element 1</div>
<div>Element 2</div>
CSS
css
div {
border: 1px solid red;
margin: 1em 0;
}
div:nth-child(1) {
border-bottom-width: thick;
}
div:nth-child(2) {
border-bottom-width: 2em;
}
Result
Specifications
| è§è |
|---|
| CSS Backgrounds and Borders Module Level 3> # border-width> |
Browser compatibility
See also
- The other border-width-related CSS properties:
border-left-width,border-right-width,border-top-width, andborder-width. - The other border-bottom-related CSS properties:
border,border-bottom,border-bottom-style, andborder-bottom-color.