border-inline-color

åºçº¿

å¹¿æ³å¯ç¨

CSS å±æ§ border-inline-color å®ä¹äºåç´ çé»è¾è¡åçè¾¹æ¡é¢è²ï¼å¹¶æ ¹æ®åç´ çä¹¦åæ¨¡å¼ãè¡åæ¹ååææ¬æåå¯¹åºè³å®ä½è¾¹æ¡é¢è²ãæ ¹æ® writing-modeãdirection å text-orientation æå®ä¹çå¼ï¼æ¤å±æ§å¯¹åºäº border-top-color å border-bottom-colorï¼æè border-right-color å border-left-color å±æ§ã

å°è¯ä¸ä¸

border-inline-color: red;
writing-mode: horizontal-tb;

border-inline-color: #32a1ce;
writing-mode: vertical-rl;

border-inline-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;
}

å¦ä¸æ¹åçè¾¹æ¡é¢è²å¯ç¨ border-block-color è®¾ç½®ï¼æ¤å±æ§ä¼è®¾ç½® border-block-start-color å border-block-end-colorã

è¯æ³

css

border-inline-color: yellow;
border-inline-color: #f5f6f7;

/* å¨å±å¼ */
border-inline-color: inherit;
border-inline-color: initial;
border-inline-color: revert;
border-inline-color: revert-layer;
border-inline-color: unset;

åå¼

<'color'>: è¾¹æ¡é¢è²ãè§ colorã

å½¢å¼å®ä¹

åå§å¼	è¯¥ç®åæå¯¹åºçæ¯ä¸ªå±æ§ï¼ `border-inline-start-color`: `currentcolor` `border-inline-end-color`: `currentcolor`
éç¨åç´	ææåç´
æ¯å¦æ¯ç»§æ¿å±æ§	å¦
è®¡ç®å¼	è¯¥ç®åæå¯¹åºçæ¯ä¸ªå±æ§ï¼ `border-inline-start-color`: é¢è²è®¡ç®å¼ `border-inline-end-color`: é¢è²è®¡ç®å¼
å¨ç»ç±»å	è¯¥ç®åæå¯¹åºçæ¯ä¸ªå±æ§ï¼ `border-inline-start-color`: æè®¡ç®å¼çç±»å `border-inline-end-color`: æè®¡ç®å¼çç±»å

å½¢å¼è¯æ³

border-inline-color = 
  <'border-top-color'>{1,2}  

<border-top-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-color: red;
}