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

Trang trước border-inline-end-width
Trang tiếp theo border-inline-start-color

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

border-inline-start thuộc tính là viết tắt của các thuộc tính sau:

CSS border-inline-start thuộc tính tương ứng với thuộc tính CSS border-bottom、border-left、border-right và border-top rất相似, nhưng border-inline-start thuộc tính phụ thuộc vào hướng nội bộ.

Lưu ý:thuộc tính CSS liên quan writing-mode、text-orientation và direction Định nghĩa hướng nội dòng. Đ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 Kết quả thuộc tính. Đối với trang tiếng Anh, hướng nội dòng là từ trái sang phải, hướng khối là từ trên xuống dưới.

Mẫu

Ví dụ 1

Đặt độ rộng, màu và样式 viền bắt đầu hướng nội dòng:

div {
  border-inline-start: 10px solid pink;
}

Thử nghiệm trực tiếp

Ví dụ 2: Kết hợp thuộc tính writing-mode

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

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

Thử nghiệm trực tiếp

Ví dụ 3: Kết hợp thuộc tính direction

Vị trí viền bắt đầu hướng nội dòng bị ảnh hưởng bởi direction Tác động thuộc tính:

div {
  direction: rtl;
  border-inline-start: 5px solid hotpink;
}

Thử nghiệm trực tiếp

Cú pháp CSS

border-inline-start: border-inline-start-width border-inline-start-style border-inline-start-color|initial|inherit;

Giá trị thuộc tính

Giá trị	Mô tả
border-inline-start-width	Đ指定 phần tử trong hướng nội dòng bắt đầu của độ rộng viền. Giá trị mặc định là medium.
border-inline-start-style	Đ指定 phần tử trong hướng nội dòng bắt đầu của樣式 viền. Giá trị mặc định là none.
border-inline-start-color	Đ指定 phần tử trong hướng nội dòng bắt đầu của màu viền. Giá trị mặc định là màu hiện tại của viền.
initial	Đặt thuộc tính này về giá trị mặc định. Xem thêm initial.
inherit	Thừa kế 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:	medium none currentcolor
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.borderInlineStart="pink dotted 5px"