border-top
åºçº¿
广æ³å¯ç¨
èª 2015å¹´7æ èµ·ï¼æ¤ç¹æ§å·²å¨ä¸»æµæµè§å¨ä¸å¾å°æ¯æï¼å¯å¨å¤§å¤æ°è®¾å¤åæµè§å¨çæ¬ä¸æ£å¸¸ä½¿ç¨ã
CSS ç®åå±æ§ border-top ç¨äºè®¾ç½®å
ç´ ä¸è¾¹æ¡çææå±æ§ã
å°è¯ä¸ä¸
border-top: solid;
border-top: dashed red;
border-top: 1rem solid;
border-top: thick double #32a1ce;
border-top: 4mm ridge rgb(211 220 50 / 0.6);
<section class="default-example" id="default-example">
<div class="transition-all" id="example-element">
è¿æ¯ä¸ä¸ªå¸¦æè¾¹æ¡ççåã
</div>
</section>
#example-element {
background-color: #eeeeee;
color: darkmagenta;
padding: 0.75em;
width: 80%;
height: 100px;
}
ä¸ææç®åå±æ§ä¸æ ·ï¼border-top æ»æ¯ä¼è®¾ç½®å®è½å¤è®¾ç½®çææå±æ§çå¼ï¼å³ä½¿è¿äºå±æ§å¨ä»£ç ä¸æ²¡æ被æ¾å¼æå®ã对äºæªæå®çå±æ§ï¼å®ä¼å°å
¶è®¾ç½®ä¸ºé»è®¤å¼ãåè§ä¸é¢ç»åºç代ç 示ä¾ï¼
border-top-style: dotted;
border-top: thick green;
å®å®é ä¸ä¸ä¸é¢è¿æ®µä»£ç ç¸åï¼
border-top-style: dotted;
border-top: none thick green;
å¨ border-top ä¹åæå®ç border-top-style å¼ä¼è¢«å¿½ç¥ãç±äº border-top-style çé»è®¤å¼æ¯ noneï¼å æ¤å¨ç®åå±æ§ä¸æ²¡ææå® border-style é¨åï¼å°±ä¸ä¼æ¾ç¤ºè¾¹æ¡ã
ç»æå±æ§
æ¤å±æ§æ¯ä»¥ä¸ CSS å±æ§çç®åå½¢å¼ï¼
è¯æ³
border-top: 1px;
border-top: 2px dotted;
border-top: medium dashed green;
/* å
¨å±å¼ */
border-top: inherit;
border-top: initial;
border-top: revert;
border-top: revert-layer;
border-top: unset;
ç®åå±æ§çä¸ä¸ªå¼å¯ä»¥æä»»æ顺åºæå®ï¼å¹¶å¯çç¥å ¶ä¸çä¸å°ä¸¤ä¸ªå¼ã
å¼
<br-width>-
åè§
border-top-widthã <br-style>-
åè§
border-top-styleã <color>-
åè§
border-top-colorã
å½¢å¼å®ä¹
| åå§å¼ | 该ç®åæ对åºçæ¯ä¸ªå±æ§ï¼
|
|---|---|
| éç¨å ç´ | ææå
ç´ . It also applies to ::first-letter. |
| æ¯å¦æ¯ç»§æ¿å±æ§ | å¦ |
| 计ç®å¼ | 该ç®åæ对åºçæ¯ä¸ªå±æ§ï¼
|
| å¨ç»ç±»å | 该ç®åæ对åºçæ¯ä¸ªå±æ§ï¼
|
å½¢å¼è¯æ³
border-top =
<line-width> ||
<line-style> ||
<color>
<line-width> =
<length [0,â]> |
hairline |
thin |
medium |
thick
<line-style> =
none |
hidden |
dotted |
dashed |
solid |
double |
groove |
ridge |
inset |
outset
示ä¾
åºç¨ä¸è¾¹æ¡
HTML
<div>è¿ä¸ªçåå¨ä¸è¾¹æä¸ä¸ªè¾¹æ¡ã</div>
CSS
div {
border-top: 4px dashed blue;
background-color: gold;
height: 100px;
width: 100px;
font-weight: bold;
text-align: center;
}
ç»æ
è§è
| è§è |
|---|
| CSS Backgrounds and Borders Module Level 3 # border-shorthands |