border-inline-width
Baseline
Widely available
This feature is well established and works across many devices and browser versions. Itâs been available across browsers since â¨2021å¹´4æâ©.
CSS å±æ§ border-inline-width å®ä¹äºå
ç´ çé»è¾è¡åçè¾¹æ¡å®½åº¦ï¼å¹¶æ ¹æ®å
ç´ ç书å模å¼ãè¡å
æ¹ååææ¬æå对åºè³å®ä½è¾¹æ¡å®½åº¦ãæ ¹æ® writing-modeãdirection å text-orientation æå®ä¹çå¼ï¼æ¤å±æ§å¯¹åºäº border-top-width å border-bottom-widthï¼æè
border-left-width å border-right-width å±æ§ã
å°è¯ä¸ä¸
border-inline-width: thick;
writing-mode: horizontal-tb;
border-inline-width: thick;
writing-mode: vertical-rl;
border-inline-width: 4px;
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: palegreen;
color: #000;
border: 0 solid crimson;
padding: 0.75em;
width: 80%;
height: 100px;
unicode-bidi: bidi-override;
}
å¦ä¸æ¹åçè¾¹æ¡å®½åº¦å¯ç¨ border-block-width 设置ï¼æ¤å±æ§ä¼è®¾ç½® border-block-start-width å border-block-end-widthã
è¯æ³
css
/* è¾¹æ¡å®½åº¦å¼ */
border-inline-width: 5px 10px;
border-inline-width: 5px;
border-inline-width: thick;
/* å
¨å±å¼ */
border-inline-width: inherit;
border-inline-width: initial;
border-inline-width: revert;
border-inline-width: revert-layer;
border-inline-width: unset;
åå¼
<'border-width'>-
è¾¹æ¡å®½åº¦ãè§
border-widthã
å½¢å¼å®ä¹
| åå§å¼ | medium |
|---|---|
| éç¨å ç´ | ææå ç´ |
| æ¯å¦æ¯ç»§æ¿å±æ§ | å¦ |
| Percentages | logical-width of containing block |
| 计ç®å¼ | absolute length; 0 if the border style is none or hidden |
| å¨ç»ç±»å | æ计ç®å¼çç±»å |
å½¢å¼è¯æ³
border-inline-width =
<'border-top-width'>{1,2}
<border-top-width> =
<line-width>
<line-width> =
<length [0,â]> |
thin |
medium |
thick
示ä¾
HTML
html
<div>
<p class="exampleText">示ä¾ææ¬</p>
</div>
CSS
css
div {
background-color: yellow;
width: 120px;
height: 120px;
}
.exampleText {
writing-mode: vertical-lr;
border: 1px solid blue;
border-inline-width: 5px 10px;
}
è§è
| Specification |
|---|
| CSS Logical Properties and Values Level 1 # propdef-border-inline-width |
æµè§å¨å ¼å®¹æ§
åè§
- CSS é»è¾å±æ§ä¸é»è¾å¼
- æ¤å±æ§å¯¹åºçå®ä½è¾¹æ¡å±æ§ï¼
border-top-widthãborder-right-widthãborder-bottom-widthåborder-left-width writing-modeãdirectionãtext-orientation