Bảng khóa học

Sách tham khảo CSS

Thuộc tính CSS

Khóa học tự chọn

Khuyến nghị khóa học:

Bao bì CodeW3C.com

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

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

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

border-block-style thuộc tính thiết lập styl hình viền của phần tử theo hướng khối.

border-block-style 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-style thuộc tính có hai giá trị:

border-block-style: dashed dotted;

styl hình viền ở đầu khối là dashed
styl hình viền ở cuối khối là point

nếu border-block-style thuộc tính có một giá trị:

border-block-style: dashed;

styl hình viền ở đầu và cuối khối đều là dashed

CSS border-block-style thuộc tính và thuộc tính CSS border-bottom-style、border-left-style、border-right-style và border-top-style Rất相似, nhưng border-block-style Thuộc tính này phụ thuộc vào hướng khối.

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

Mô hình

Ví dụ 1

Đặt樣式 cạnh hướng khối:

#example1 {
  border-block-style: solid;
}
#example2 {
  border-block-style: dashed dotted;
}

Thử ngay

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

Vị trí của cạnh biên bắt đầu và kết thúc của hướng khối bị ảnh hưởng bởi writing-mode Tác động của thuộc tính:

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

Thử ngay

Ngữ pháp CSS

border-block-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ó cạnh biên.
hidden	Tương tự như none, nhưng ngoại trừ khi giải quyết xung đột cạnh biên của phần tử bảng.
dotted	Đ指定 cạnh biên chấm
dashed	Đ指定 cạnh biên mờ
solid	Đ指定 cạnh biên đậm
double	Đ指定 cạnh biên kép
groove	Đ指定 3D cạnh rãnh Hiệu ứng phụ thuộc vào giá trị của border-color.
ridge	Đ指定 3D cạnh nổi Hiệu ứng phụ thuộc vào giá trị của border-color.
inset	Đ指定 3D cạnh chìm Hiệu ứng phụ thuộc vào giá trị của border-color.
outset	Đ指定 3D cạnh nổi 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	Thuộc tính này được kế thừa 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
Tạo animation:	Không hỗ trợ. Xem thêm:Các thuộc tính liên quan đến animation.
Phiên bản:	CSS3
Ngữ pháp JavaScript:	object.style.borderBlockStyle="dotted"