border-right
åºçº¿
广æ³å¯ç¨
èª 2015å¹´7æ èµ·ï¼æ¤ç¹æ§å·²å¨ä¸»æµæµè§å¨ä¸å¾å°æ¯æï¼å¯å¨å¤§å¤æ°è®¾å¤åæµè§å¨çæ¬ä¸æ£å¸¸ä½¿ç¨ã
border-right CSS ç®å屿§ç¨äºè®¾ç½®å
ç´ å³è¾¹æ¡çææå±æ§ã
å°è¯ä¸ä¸
border-right: solid;
border-right: dashed red;
border-right: 1rem solid;
border-right: thick double #32a1ce;
border-right: 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-right å§ç»è®¾ç½®å®å¯ä»¥è®¾ç½®çææå±æ§çå¼ï¼å³ä½¿è¿äºå±æ§æªè¢«æç¡®æå®ãå®å°é£äºæªæå®çå¼è®¾ç½®ä¸ºé»è®¤å¼ã请çä¸é¢ç代ç ï¼
border-right-style: dotted;
border-right: thick green;
å®é ä¸ï¼å®åè¿ä¸ªæ¯ä¸æ ·çï¼
border-right-style: dotted;
border-right: none thick green;
å¨ border-right ä¹åç»å®ç border-right-style çå¼å°è¢«å¿½ç¥ãç±äº border-right-style çé»è®¤å¼æ¯ noneï¼å¦ææ²¡ææå® border-style é¨åï¼åä¸ä¼æ¾ç¤ºè¾¹æ¡ã
ç»æå±æ§
è¯¥å±æ§ä¸ºä»¥ä¸ CSS 屿§çç®åï¼
è¯æ³
border-right: 1px;
border-right: 2px dotted;
border-right: medium dashed green;
/* å
¨å±å¼ */
border-right: inherit;
border-right: initial;
border-right: revert;
border-right: revert-layer;
border-right: unset;
ç®å屿§çä¸ä¸ªå¼å¯ä»¥ä»»æé¡ºåºæå®ï¼ä¹å¯ä»¥çç¥å ¶ä¸çä¸ä¸ªæä¸¤ä¸ªå¼ã
å¼
<br-width>-
åè§
border-right-widthã <br-style>-
åè§
border-right-styleã <color>-
åè§
border-right-colorã
å½¢å¼å®ä¹
| åå§å¼ | 该ç®åæå¯¹åºçæ¯ä¸ªå±æ§ï¼
|
|---|---|
| éç¨å ç´ | ææå
ç´ . It also applies to ::first-letter. |
| æ¯å¦æ¯ç»§æ¿å±æ§ | å¦ |
| 计ç®å¼ | 该ç®åæå¯¹åºçæ¯ä¸ªå±æ§ï¼
|
| å¨ç»ç±»å | 该ç®åæå¯¹åºçæ¯ä¸ªå±æ§ï¼
|
å½¢å¼è¯æ³
border-right =
<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-right: 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 > |