border-inline-end-color
åºçº¿
广æ³å¯ç¨
èª 2020å¹´1æ èµ·ï¼æ¤ç¹æ§å·²å¨ä¸»æµæµè§å¨ä¸å¾å°æ¯æï¼å¯å¨å¤§å¤æ°è®¾å¤åæµè§å¨çæ¬ä¸æ£å¸¸ä½¿ç¨ã
CSS å±æ§ border-inline-end-color å®ä¹äºå
ç´ çé»è¾è¡æ«çè¾¹æ¡é¢è²ï¼å¹¶æ ¹æ®å
ç´ ç书å模å¼ãè¡å
æ¹ååææ¬æå对åºè³å®ä½è¾¹æ¡é¢è²ãæ ¹æ® writing-modeãdirection å text-orientation æå®ä¹çå¼ï¼æ¤å±æ§å¯¹åºäº border-top-colorãborder-right-colorãborder-bottom-color æ border-left-color å±æ§ã
å°è¯ä¸ä¸
border-inline-end-color: red;
writing-mode: horizontal-tb;
border-inline-end-color: #32a1ce;
writing-mode: vertical-rl;
border-inline-end-color: rgb(170, 50, 220, 0.6);
writing-mode: horizontal-tb;
direction: rtl;
<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: #000;
border: 0.75em solid;
padding: 0.75em;
width: 80%;
height: 100px;
unicode-bidi: bidi-override;
}
è¯æ³
css
border-inline-end-color: rebeccapurple;
border-inline-end-color: #663399;
/* å
¨å±å¼ */
border-inline-end-color: inherit;
border-inline-end-color: initial;
border-inline-end-color: revert;
border-inline-end-color: revert-layer;
border-inline-end-color: unset;
ä¸æ¤ç¸å
³çå±æ§æ border-block-start-colorãborder-block-end-color å border-inline-start-colorï¼è¿äºå±æ§å®ä¹äºå
ç´ å
¶ä»è¾¹æ¡çé¢è²ã
åå¼
å½¢å¼å®ä¹
| åå§å¼ | currentcolor |
|---|---|
| éç¨å ç´ | ææå ç´ |
| æ¯å¦æ¯ç»§æ¿å±æ§ | å¦ |
| 计ç®å¼ | é¢è²è®¡ç®å¼ |
| å¨ç»ç±»å | æ计ç®å¼çç±»å |
å½¢å¼è¯æ³
border-inline-end-color =
<color> |
<image-1D>
<image-1D> =
<stripes()>
<stripes()> =
stripes( <color-stripe># )
<color-stripe> =
<color> &&
[ <length-percentage> | <flex> ]?
<length-percentage> =
<length> |
<percentage>
示ä¾
HTML
html
<div>
<p class="exampleText">示ä¾ææ¬</p>
</div>
CSS
css
div {
background-color: yellow;
width: 120px;
height: 120px;
}
.exampleText {
writing-mode: vertical-lr;
border: 10px solid blue;
border-inline-end-color: red;
}
è§è
| è§è |
|---|
| CSS Logical Properties and Values Module Level 1 # border-color |
æµè§å¨å ¼å®¹æ§
åè§
- CSS é»è¾å±æ§ä¸é»è¾å¼
- æ¤å±æ§å¯¹åºçå®ä½è¾¹æ¡å±æ§ï¼
border-top-colorãborder-right-colorãborder-bottom-coloræborder-left-color writing-modeãdirectionãtext-orientation