Thuộc tính border-inline-start-color CSS

định nghĩa và cách sử dụng

border-inline-start-color thiết lập thuộc tính màu viền của phần tử bắt đầu từ vị trí đầu tiên theo hướng hàng.

Lưu ý:để làm cho border-inline-start-color thuộc tính có hiệu lực, phải thiết lập border-inline-start-style thuộc tính.

CSS border-inline-start-color thuộc tính với màu viền dưới,màu viền trái,màu viền phảiborder-top-color Thuộc tính rất相似, nhưng border-inline-start-color Thuộc tính này phụ thuộc vào hướng nội bộ.

Lưu ý:các thuộc tính CSS liên quan writing-mode,text-orientationdirection Định nghĩa hướng nội bộ. Điều này ảnh hưởng đến vị trí bắt đầu và kết thúc của một dòng, cũng như border-inline-start-color Tác động của thuộc tính. Đối với trang tiếng Anh, hướng nội bộ là từ trái sang phải, hướng khối là từ trên xuống.

Mô hình

Ví dụ 1

Đặt màu sắc cho viền bắt đầu trong hướng nội bộ:

div {
  border-inline-start-style: solid;
  border-inline-start-color: pink;
}

Thử ngay

Ví dụ 2

sử dụng thuộc tính writing-mode

Vị trí của viền bắt đầu trong hướng nội bộ bị ảnh hưởng bởi writing-mode Tác động của thuộc tính:

div {
  border-inline-start-style: solid;
  writing-mode: vertical-rl;
  border-inline-start-color: 5px;
}

Thử ngay

Ví dụ 3

sử dụng thuộc tính direction

Vị trí của viền bắt đầu và kết thúc trong hướng nội bộ bị ảnh hưởng bởi direction Tác động của thuộc tính:

div {
  direction: rtl;
  border-inline-start-color: hotpink;
}

Thử ngay

Cú pháp CSS

border-inline-start-color: color|transparent|initial|inherit;

Giá trị thuộc tính

Giá trị Mô tả
color Định nghĩa màu sắc của viền. Mặc định là màu sắc hiện tại của phần tử. Xem thêm:Giá trị màu CSS.
transparent Định nghĩa màu sắc của viền nên là trong suốt.
initial Đặt thuộc tính này về giá trị mặc định. Xem thêm initial.
inherit Kế thừa thuộc tính này từ phần tử cha. Xem thêm inherit.

Chi tiết kỹ thuật

Giá trị mặc định: Màu sắc hiện tại của phần tử
Kế thừa: Không
Chế tạo animation: Hỗ trợ. Xem thêm:Thuộc tính liên quan đến animation.
Phiên bản: CSS3
Cú pháp JavaScript: object.style.borderInlineStartColor="pink"

Hỗ trợ trình duyệt

Số trong bảng biểu thị phiên bản trình duyệt đầu tiên hỗ trợ thuộc tính này hoàn toàn.

Chrome Edge Firefox Safari Opera
69.0 79.0 41.0 12.1 56.0

Trang liên quan

Hướng dẫn:BORDER CSS

Tham khảo:Thuộc tính border CSS

Tham khảo:Thuộc tính border-inline CSS

Tham khảo:Thuộc tính border-inline-end-color CSS

Tham khảo:Thuộc tính border-inline-start-style CSS

Tham khảo:Thuộc tính border-bottom-color CSS

Tham khảo:Thuộc tính border-left-color CSS

Tham khảo:Thuộc tính border-right-color CSS

Tham khảo:Thuộc tính border-top-color CSS

Tham khảo:Thuộc tính direction trong CSS

Tham khảo:Thuộc tính text-orientation CSS

Tham khảo:Thuộc tính writing-mode CSS