border-inline-start-color
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 CSS border-inline-start-color xác định màu sắc của đường viền logic phía đầu theo chiều ngang nội tuyến của một phần tử, ánh xạ tới màu đườ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-color, border-right-color, border-bottom-color, hoặc border-left-color tùy theo các giá trị được xác định cho writing-mode, direction, và text-orientation.
Try it
border-inline-start-color: red;
writing-mode: horizontal-tb;
border-inline-start-color: #32a1ce;
writing-mode: vertical-rl;
border-inline-start-color: rgb(170 50 220 / 0.6);
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: #eeeeee;
color: black;
border: 0.75em solid;
padding: 0.75em;
width: 80%;
height: 100px;
unicode-bidi: bidi-override;
}
Cú pháp
border-inline-start-color: red;
border-inline-start-color: #ee4141;
/* Giá trị toàn cục */
border-inline-start-color: inherit;
border-inline-start-color: initial;
border-inline-start-color: revert;
border-inline-start-color: revert-layer;
border-inline-start-color: unset;
Các thuộc tính liên quan là border-block-start-color, border-block-end-color, và border-inline-end-color, xác định màu đường viền còn lại của phần tử.
Giá trị
<color>-
Màu sắc của đường viền.
Định nghĩa hình thức
| Initial value | currentcolor |
|---|---|
| Applies to | all elements |
| Inherited | no |
| Computed value | computed color |
| Animation type | by computed value type |
Cú pháp hình thức
border-inline-start-color =
<color> |
<image-1D>
<image-1D> =
<stripes()>
<stripes()> =
stripes( <color-stripe># )
<color-stripe> =
<color> &&
[ <length-percentage> | <flex> ]?
<length-percentage> =
<length> |
<percentage>
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: 10px solid blue;
border-inline-start-color: red;
}
Thông số kỹ thuật
| Thông số kỹ thuật |
|---|
| CSS Logical Properties and Values Module Level 1 # border-color |
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-color,border-right-color,border-bottom-color, vàborder-left-color writing-mode,direction,text-orientation