border-block-start-width
Baseline
Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since January 2020.
Thuộc tính border-block-start-width trong CSS xác định độ rộng của đường viền logic phía đầu khối của một phần tử, tương ứng với một độ rộng đường viền vật lý tùy thuộc vào chế độ viết, 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, border-right-width, border-bottom-width hoặc border-left-width tùy theo các giá trị được định nghĩa cho writing-mode, direction và text-orientation.
Try it
border-block-start-width: thick;
writing-mode: horizontal-tb;
border-block-start-width: thick;
writing-mode: vertical-rl;
border-block-start-width: 4px;
writing-mode: horizontal-tb;
border-block-start-width: 4px;
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: 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-block-start-width: 5px;
border-block-start-width: thick;
/* Giá trị toàn cục */
border-block-start-width: inherit;
border-block-start-width: initial;
border-block-start-width: revert;
border-block-start-width: revert-layer;
border-block-start-width: unset;
Các thuộc tính liên quan là border-block-end-width, border-inline-start-width và border-inline-end-width, xác định độ rộng đường viền còn lại của phần tử.
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-block-start-width =
<line-width>
<line-width> =
<length [0,∞]> |
hairline |
thin |
medium |
thick
Ví dụ
Độ rộng đường viền với văn bản dọc
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-block-start-width: 5px;
}
Kết quả
Đặc tả kỹ thuật
| Specification |
|---|
| CSS Logical Properties and Values Module Level 1 # border-width |
Tương thích trình duyệt
Xem thêm
- CSS Logical Properties and Values
- 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-widthvàborder-left-width writing-mode,direction,text-orientation