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

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

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

border-block-end-style thuộc tính được sử dụng để thiết lập phong cách cạnh lề của phần tử ở cuối hướng khối.

CSS border-block-end-style thuộc tính và border-bottom-style、border-left-style、border-right-style và border-top-style Thuộc tính rất tương tự, nhưng border-block-end-style Thuộc tính này phụ thuộc vào hướng block.

Lưu ý:các thuộc tính CSS liên quan writing-mode Định nghĩa hướng block. Điều này sẽ ảnh hưởng đến vị trí đầu và cuối của khối cũng như border-block-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 qua phải, hướng block là xuống.

Thực tế

Ví dụ 1

Đặt样式 cho border末端 block direction:

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

Thử nghiệm trực tiếp

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

Vị trí của border-style末端 block direction bị ảnh hưởng bởi writing-mode Tác động của thuộc tính:

div {
  border-block-end-style: solid;
  writing-mode: vertical-rl;
  border-block-end-width: 5px;
}

Thử nghiệm trực tiếp

Cú pháp CSS

border-block-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. Đ指定 không có border.
hidden	Tương tự như "none", nhưng khác nhau trong việc giải quyết xung đột边框 của phần tử bảng.
dotted	Đ指定 dotted edge.
dashed	Đ指定 dashed edge.
solid	Đ指定 solid edge.
double	Đ指定 double edge.
groove	Đ指定 3D groove edge. Hiệu ứng phụ thuộc vào giá trị của border-color.
ridge	Đ指定 3D ridge edge. Hiệu ứng phụ thuộc vào giá trị của border-color.
inset	Đ指定 3D inner bevel edge. Hiệu ứng phụ thuộc vào giá trị của border-color.
outset	Đ指定 3D outer bevel edge. 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	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:	none
Kế thừa:	Không
Chế tạo animation:	no. Đọc về animatable
Phiên bản:	CSS3
Cú pháp JavaScript:	object.style.borderBlockEndStyle="dotted"