border-block-style

åºçº¿ å¹¿æ³å¯ç¨

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

å°è¯ä¸ä¸

border-block-style: dotted;
writing-mode: horizontal-tb;

border-block-style: dotted;
writing-mode: vertical-rl;

border-block-style: groove;
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-inline-style è®¾ç½®ï¼æ¤å±æ§ä¼è®¾ç½® border-inline-start-style å border-inline-end-styleã

è¯æ³

css

/* è¾¹æ¡çº¿åå¼ */
border-block-style: dashed;
border-block-style: dotted;
border-block-style: groove;

/* å¨å±å¼ */
border-block-style: inherit;
border-block-style: initial;
border-block-style: revert;
border-block-style: revert-layer;
border-block-style: unset;

åå¼

<'border-style'>: è¾¹æ¡çº¿åãè§ border-styleã

å½¢å¼å®ä¹

åå§å¼	`none`
éç¨åç´	ææåç´
æ¯å¦æ¯ç»§æ¿å±æ§	å¦
è®¡ç®å¼	as specified
å¨ç»ç±»å	ç¦»æ£å¼

å½¢å¼è¯æ³

border-block-style = 
  <'border-top-style'>{1,2}  

<border-top-style> = 
  <line-style>  

<line-style> = 
  none    |
  hidden  |
  dotted  |
  dashed  |
  solid   |
  double  |
  groove  |
  ridge   |
  inset   |
  outset

ç¤ºä¾

ç«æææ¬çèçº¿è¾¹æ¡

HTML

html

<div>
  <p class="exampleText">ç¤ºä¾ææ¬</p>
</div>

CSS

css

div {
  background-color: yellow;
  width: 120px;
  height: 120px;
}

.exampleText {
  writing-mode: vertical-lr;
  border: 5px solid blue;
  border-block-style: dashed;
}