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 April 2021.
Thuộc tính CSS border-inline-width xác định độ rộng của các đường viền logic theo chiều ngang nội tuyến của một phần tử, ánh xạ tới độ rộng đường viền vật lý tương ứng tùy thuộc vào chế độ viết, chiều hướng và hướng văn bản của phần tử đó. Nó tương ứng với thuộc tính border-top-width và border-bottom-width, hoặc border-left-width và border-right-width tùy theo các giá trị được xác định cho writing-mode, direction, và text-orientation.
Độ rộng đường viền theo chiều còn lại có thể được thiết lập bằng border-block-width, vốn thiết lập border-block-start-width và border-block-end-width.
Try it
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: black;
border: 0 solid crimson;
padding: 0.75em;
width: 80%;
height: 100px;
unicode-bidi: bidi-override;
}
Cú pháp
/* Giá trị <'border-width'> */
border-inline-width: 5px 10px;
border-inline-width: 5px;
border-inline-width: thick;
/* Giá trị toàn cục */
border-inline-width: inherit;
border-inline-width: initial;
border-inline-width: revert;
border-inline-width: revert-layer;
border-inline-width: unset;
Giá trị
<'border-width'>-
Độ rộng của đường viền. Xem
border-width.
Định nghĩa hình thức
| Initial value | medium |
|---|---|
| Applies to | all elements |
| Inherited | no |
| Percentages | logical-width of containing block |
| Computed value | absolute length; 0 if the border style is none or hidden |
| Animation type | by computed value type |
Cú pháp hình thức
border-inline-width =
<'border-top-width'>{1,2}
<border-top-width> =
<line-width>
<line-width> =
<length [0,∞]> |
hairline |
thin |
medium |
thick
Ví dụ
HTML
<div>
<p class="exampleText">Example text</p>
</div>
CSS
div {
background-color: yellow;
width: 120px;
height: 120px;
}
.exampleText {
writing-mode: vertical-lr;
border: 1px solid blue;
border-inline-width: 5px 10px;
}
Thông số kỹ thuật
| Specification |
|---|
| CSS Logical Properties and Values Module Level 1 # propdef-border-inline-width |
Tương thích trình duyệt
Xem thêm
- Thuộc tính và giá trị logic CSS
- Thuộc tính này ánh xạ tới một trong các thuộc tính đường viền vật lý:
border-top-width,border-right-width,border-bottom-width, vàborder-left-width writing-mode,direction,text-orientation