Thuộc tính border-inline-end-style CSS

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

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

border-inline-end-style cài đặt樣式 viền ở cuối hướng trong dòng của phần tử.

Thuộc tính CSS border-inline-end-style Thuộc tính với border-bottom-style、border-left-style、border-right-style và border-top-style Thuộc tính rất相似, nhưng border-inline-end-style Thuộc tính phụ thuộc vào hướng trong dòng.

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

Mẫu

Ví dụ 1

Đặt kiểu cho biên cuối của hướng in-line:

div {
  border-inline-end-style: dotted;
}

Thử nghiệm ngay

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

Vị trí cuối của biên trong hướng in-line bị ảnh hưởng bởi writing-mode Tác động thuộc tính:

div {
  writing-mode: vertical-rl;
  border-inline-end-style: dotted;
}

Thử nghiệm ngay

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

Vị trí đầu và cuối của biên trong hướng in-line bị ảnh hưởng bởi direction Tác động thuộc tính:

div {
  direction: rtl;
  border-inline-end-style: dotted;
}

Thử nghiệm ngay

Cú pháp CSS

border-inline-end-style: none|hidden|dotted|dashed|solid|double|groove|ridge|inset|outset|initial|inherit;

Giá trị thuộc tính

Giá trị	Mô tả
none	Giá trị mặc định. Đ指定无边框。
hidden	Tương tự như none, nhưng có sự khác biệt trong việc giải quyết xung đột biên của phần tử bảng.
dotted	Đ指定点状边框。
dashed	Đ指定虚线边框。
solid	Đ指定实线边框。
double	Đ指定双线边框。
groove	Đ指定 3D凹槽边框。 Hiệu ứng phụ thuộc vào giá trị của border-color.
ridge	Đ指定 3D凸起边框。 Hiệu ứng phụ thuộc vào giá trị của border-color.
inset	Đ指定 3D内嵌边框。 Hiệu ứng phụ thuộc vào giá trị của border-color.
outset	Đ指定 3D外凸边框。 Hiệu ứng phụ thuộc vào giá trị của border-color.
initial	Đặt thuộc tính này về giá trị mặc định. Xem thêm initial.
inherit	Thay đổi thuộc tính này từ giá trị của phần tử cha. Xem thêm inherit.

Chi tiết kỹ thuật

Giá trị mặc định:	none
Di truyền:	Không
Tạo animation:	Không 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.borderInlineEndStyle="dotted"