Thuộc tính chiều rộng khối đường viền CSS
Ví dụ
Đặt chiều rộng cho đường 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;
}
Hãy tự mình thử »Thêm ví dụ "Hãy tự mình thử" bên dưới.
Định nghĩa và cách sử dụng
Thuộc tính border-block-width
thiết lập độ rộng đường viền của phần tử theo hướng khối.
Lưu ý: Để thuộc tính border-block-width
có hiệu lực, phải đặt border-block-style
.
Các giá trị cho thuộc tính border-block-width
có thể được đặt theo nhiều cách khác nhau:
Nếu thuộc tính border-block-width có hai giá trị:
- chiều rộng khối viền: 10px 50px;
- chiều rộng đường viền khi bắt đầu khối là 10px
- chiều rộng đường viền ở cuối khối là 50px
Nếu thuộc tính border-block-width có một giá trị:
- chiều rộng khối viền: 10px;
- chiều rộng đường viền khi bắt đầu và kết thúc khối là 10px
Thuộc tính CSS border-block-width
rất giống với các thuộc tính CSS border-bottom-width
, border-left-width
, border-right-width
và border-top-width
, nhưng thuộc tính border-block-width
phụ thuộc vào block phương hướng.
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 một khối cũng như kết quả của thuộc tính border-block-width
. Đố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: | trung bình |
---|---|
Thừa hưởng: | KHÔNG |
Hoạt hình: | Đúng. Đọc về hoạt hìnhHãy thử nó |
Phiên bản: | CSS3 |
Cú pháp JavaScript: | đối tượng .style.borderBlockWidth="3px 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-width | 87.0 | 87.0 | 66.0 | 14.1 | 73.0 |
Cú pháp CSS
border-block-width: medium|thin|thick| length |initial|inherit;
Giá trị tài sản
Value | Description | Demo |
---|---|---|
medium | Specifies a medium border. This is default | Demo ❯ |
thin | Specifies a thin border | Demo ❯ |
thick | Specifies a thick border | Demo ❯ |
length | Allows you to define the thickness of the border. Read about length units | 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 {
border-block-style: solid;
writing-mode: vertical-rl;
border-block-width: 5px;
}
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 khối viền CSS: Thuộc tính khối viền CSS
Thuộc tính CSS border-block-end-width: Thuộc tính CSS Border-block-end-width
Thuộc tính CSS border-block-start-width: Thuộc tính CSS Border-block-start-width
Thuộc tính CSS border-block-style: Thuộc tính CSS Border-block-style
Thuộc tính CSS border-bottom-width: Thuộc tính CSS Border-bottom-width
Thuộc tính CSS border-left-width: Thuộc tính CSS Border-left-width
Thuộc tính CSS border-right-width: Thuộc tính CSS Border-right-width
Thuộc tính CSS border-top-width: Thuộc tính CSS Border-top-width
Thuộc tính chế độ viết CSS: Thuộc tính chế độ viết CSS