Thuộc tính border-block-width của CSS

Trang trước border-block-style
Trang tiếp theo border-bottom

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

border-block-width Cài đặt chiều rộng viền của thuộc tính cài đặt yếu tố trên hướng khối:

Lưu ý:Để làm cho: border-block-width Thuộc tính phải được thiết lập để có hiệu lực: border-block-style.

border-block-width Giá trị của thuộc tính có thể được thiết lập bằng nhiều cách:

Nếu border-block-width Thuộc tính có hai giá trị:

border-block-width: 10px 50px;

Chiều rộng viền bắt đầu của khối là 10px
Chiều rộng viền kết thúc của khối là 50px

Nếu border-block-width Thuộc tính có một giá trị:

border-block-width: 10px;

Chiều rộng viền bắt đầu và kết thúc của khối đều là 10px

CSS border-block-width Thuộc tính tương ứng với thuộc tính CSS border-bottom-width,border-left-width,border-right-width và border-top-width Rất giống nhau, nhưng border-block-width Thuộc tính phụ thuộc vào hướng khối.

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

Mô hình

Ví dụ 1

Đặt độ rộng của viền theo hướng khối:

#example1 {
  border-block-style: solid;
  border-block-width: 10px;
}
#example2 {
  border-block-style: solid;
  border-block-width: thin thick;
}

Thử nghiệm trực tiếp

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

Viền bắt đầu và kết thúc theo hướng khối bị ảnh hưởng bởi writing-mode Thuộc tính ảnh hưởng:

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

Thử nghiệm trực tiếp

Ngôn ngữ CSS

border-block-width: medium|thin|thick|length|initial|inherit;

Giá trị thuộc tính

Giá trị	Mô tả
medium	Định nghĩa viền trung bình. Giá trị mặc định.
thin	Định nghĩa viền mỏng.
thick	Định nghĩa viền đậm.
length	Cho phép bạn định nghĩa độ dày của viền. Xem thêm:Đơn vị CSS.
initial	Đặt thuộc tính này lại giá trị mặc định. Xem thêm initial.
inherit	Thực hiện lại thuộc tính này từ elemen cha. Xem thêm inherit.

Chi tiết kỹ thuật

Giá trị mặc định:	medium
Di truyền:	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
Ngôn ngữ lập trình JavaScript:	object.style.borderBlockWidth="3px 10px"