-webkit-border-before
非標準：此特性未標準化。我們不建議在生產環境中使用非標準特性，因為它們瀏覽器支援有限，並且可能會更改或被移除。但是，在沒有標準選項的特定情況下，它們可以是合適的替代方案。
-webkit-border-before CSS 屬性是一個簡寫屬性，用於在樣式表中集中設定各個邏輯塊開始邊框屬性值。
構成屬性
此屬性是以下 CSS 屬性的簡寫：
語法
css
/* Border values */
-webkit-border-before: 1px;
-webkit-border-before: 2px dotted;
-webkit-border-before: medium dashed blue;
/* Global values */
-webkit-border-before: inherit;
-webkit-border-before: initial;
-webkit-border-before: revert;
-webkit-border-before: revert-layer;
-webkit-border-before: unset;
值
以下一項或多項，順序任意
描述
-webkit-border-before 屬性根據元素的書寫模式、方向性和文字方向對映到物理邊框。它對應於 border-top、border-right、border-bottom 或 border-left 屬性，具體取決於為 writing-mode、direction 和 text-orientation 定義的值。
它與 -webkit-border-after、-webkit-border-start 和 -webkit-border-end 相關，它們定義了元素的其他邊框。
此屬性的標準等效項是 border-block-start。
正式定義
| 初始值 | 作為簡寫中的每個屬性
|
|---|---|
| 應用於 | 所有元素 |
| 繼承性 | 是 |
| 百分比 | 作為簡寫中的每個屬性
|
| 計算值 | 作為簡寫中的每個屬性
|
| 動畫型別 | 離散 |
正式語法
-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,∞]> |
thin |
medium |
thick
<line-style> =
none |
hidden |
dotted |
dashed |
solid |
double |
groove |
ridge |
inset |
outset
示例
對垂直文字應用邊框
HTML
html
<div>
<p class="exampleText">Example text</p>
</div>
CSS
css
div {
background-color: yellow;
width: 120px;
height: 120px;
}
.exampleText {
writing-mode: vertical-rl;
-webkit-border-before: 5px dashed blue;
}
結果
規範
不屬於任何標準，但與標準追蹤的 border-block-start 屬性相關。
瀏覽器相容性
載入中…