Thuộc tính khối viền CSS
Ví dụ
Đặt kiểu, màu sắc và chiều rộng của đường viền cho các phần tử khác nhau theo hướng khối:
h1 {
border-block: 5px solid red;
}
h2 {
border-block: 4px dotted blue;
}
div {
border-block:
double;
}
Hãy tự mình thử »Định nghĩa và cách sử dụng
Thuộc tính border-block
là thuộc tính viết tắt của các thuộc tính sau:
Nếu các giá trị về màu sắc hoặc chiều rộng bị bỏ qua thì các giá trị mặc định sẽ được sử dụng.
Thuộc tính border-block
của CSS rất giống với thuộc tính CSS border
, nhưng thuộc tính border-block
phụ thuộc vào hướng của khối.
Lưu ý: writing-mode
tính CSS liên quan xác định 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ư kết quả của thuộc tính border-block
. Đối với các trang bằng tiếng Anh, hướng nội tuyến là từ trái sang phải và hướng khối là hướng xuống dưới.
Giá trị mặc định: | vừa không có màu |
---|---|
Thừa hưởng: | KHÔNG |
Hoạt hình: | vâng, xem các thuộc tính riêng lẻ . Đọc về hoạt hình Hãy thử nó |
Phiên bản: | CSS3 |
Cú pháp JavaScript: | object .style.borderBlock="dashed hotpink 10px" Hãy dùng thử |
Hỗ trợ trình duyệt
Các số trong bảng chỉ định phiên bản trình duyệt đầu tiên hỗ trợ đầy đủ thuộc tính.
Property | |||||
---|---|---|---|---|---|
border-block | 87.0 | 87.0 | 66.0 | 14.1 | 73.0 |
Cú pháp CSS
border-block: border-block-width border-block-style border-block-color |initial|inherit;
Giá trị tài sản
Value | Description | Demo |
---|---|---|
border-block-width | Specifies the width of the border in the block direction. Default value is "medium" | Demo ❯ |
border-block-style | Specifies the style of the border in the block direction. Default value is "none" | Demo ❯ |
border-block-color | Specifies the color of the border in the block direction. Default value is the color of the text | Demo ❯ |
initial | Sets this property to its default value. Read about initial | |
inherit | Inherits this property from its parent element. Read about inherit |
Thêm ví dụ
Với thuộc tính chế độ viết
Vị trí của các đường viền ở đầu và cuối theo hướng khối bị ảnh hưởng bởi thuộc tính writing-mode
:
div {
writing-mode: vertical-rl;
border-block: hotpink dashed 8px;
}
Hãy tự mình thử »Trang liên quan
Hướng dẫn CSS: Đường viền CSS
Thuộc tính viền CSS: Thuộc tính CSS Border
Thuộc tính CSS border-block-color: Thuộc tính CSS Border-block-color
Thuộc tính CSS border-block-style: Thuộc tính CSS Border-block-style
Thuộc tính CSS border-block-width: Thuộc tính CSS Border-block-width
Thuộc tính chế độ viết CSS: Thuộc tính chế độ viết CSS