-webkit-border-before
Non-standard: This feature is not standardized. We do not recommend using non-standard features in production, as they have limited browser support, and may change or be removed. However, they can be a suitable alternative in specific cases where no standard option exists.
Thuộc tính CSS -webkit-border-before là thuộc tính viết tắt dùng để thiết lập các giá trị thuộc tính đường viền logic bắt đầu khối riêng lẻ tại một chỗ trong bảng style.
Các thuộc tính thành phần
Thuộc tính này là viết tắt cho các thuộc tính CSS sau:
Cú pháp
/* Giá trị đường viền */
-webkit-border-before: 1px;
-webkit-border-before: 2px dotted;
-webkit-border-before: medium dashed blue;
/* Giá trị toàn cục */
-webkit-border-before: inherit;
-webkit-border-before: initial;
-webkit-border-before: revert;
-webkit-border-before: revert-layer;
-webkit-border-before: unset;
Giá trị
Một hoặc nhiều giá trị sau, theo thứ tự bất kỳ:
Mô tả
Thuộc tính -webkit-border-before ánh xạ tới một đường viền vật lý tùy thuộc vào chế độ viết, hướng và hướng văn bản của phần tử. Nó tương ứng với thuộc tính border-top, border-right, border-bottom, hoặc border-left tùy theo các giá trị được định nghĩa cho writing-mode, direction, và text-orientation.
Nó liên quan đến -webkit-border-after, -webkit-border-start, và -webkit-border-end, vốn định nghĩa các đường viền còn lại của phần tử.
Thuộc tính tiêu chuẩn tương đương với thuộc tính này là border-block-start.
Định nghĩa hình thức
| Initial value | as each of the properties of the shorthand:
|
|---|---|
| Applies to | all elements |
| Inherited | yes |
| Percentages | as each of the properties of the shorthand:
|
| Computed value | as each of the properties of the shorthand:
|
| Animation type | discrete |
Cú pháp hình thức
-webkit-border-before =
<'border-width'> ||
<'border-style'> ||
<color>
<border-width> =
<'border-top-width'>{1,4}
<border-style> =
<'border-top-style'>{1,4}
<border-top-width> =
<line-width>
<border-top-style> =
<line-style>
<line-width> =
<length [0,∞]> |
hairline |
thin |
medium |
thick
<line-style> =
none |
hidden |
dotted |
dashed |
solid |
double |
groove |
ridge |
inset |
outset
Ví dụ
Áp dụng đường viền với văn bản dọc
HTML
<div>
<p class="exampleText">Example text</p>
</div>
CSS
div {
background-color: yellow;
width: 120px;
height: 120px;
}
.exampleText {
writing-mode: vertical-rl;
-webkit-border-before: 5px dashed blue;
}
Kết quả
Đặc tả
Không thuộc bất kỳ tiêu chuẩn nào, nhưng liên quan đến thuộc tính tiêu chuẩn border-block-start.
Tương thích trình duyệt
Xem thêm
border-block-start- Các thuộc tính vật lý tương ứng:
border-top,border-right,border-bottom, vàborder-left writing-mode,direction,text-orientation