border-block-start-style

Baseline Widely available

This feature is well established and works across many devices and browser versions. Itâs been available across browsers since â¨2020å¹´1æâ©.

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

å°è¯ä¸ä¸

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

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

border-block-start-style: groove;
writing-mode: horizontal-tb;

border-block-start-style: dashed;
writing-mode: vertical-lr;

<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-block-start-style: dashed;
border-block-start-style: dotted;
border-block-start-style: groove;

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

ä¸æ¤ç¸å³çå±æ§æ border-block-end-styleãborder-inline-start-style å border-inline-end-styleï¼è¿äºå±æ§å®ä¹äºåç´ å¶ä»è¾¹æ¡ççº¿åã

åå¼

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

å½¢å¼å®ä¹

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

å½¢å¼è¯æ³

border-block-start-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-start-style: dashed;
}