-webkit-border-before

非标准: 该特性是非标准的，请尽量不要在生产环境中使用它！

-webkit-border-before CSS 属性是一个用于在样式表中统一设置逻辑块起始边框各属性值的简写属性。

组成属性

该属性是以下 CSS 属性的简写：

语法

css
/* 边框值 */
-webkit-border-before: 1px;
-webkit-border-before: 2px dotted;
-webkit-border-before: medium dashed blue;

/* 全局值 */
-webkit-border-before: inherit;
-webkit-border-before: initial;
-webkit-border-before: revert;
-webkit-border-before: revert-layer;
-webkit-border-before: unset;

值

以下一个或多个，顺序不限：

<'border-width'>

参阅 border-width

<'border-style'>

参阅 border-style

<'color'>

参阅 color

描述

-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。

形式定义

初始值该简写所对应的每个属性：
适用元素所有元素
是否是继承属性是
Percentages该简写所对应的每个属性：
计算值该简写所对应的每个属性：
动画类型离散值

形式语法

-webkit-border-before =
  <'border-width'> || <'border-style'> || <color>

示例

对垂直文本应用边框

HTML

html
<div>
  <p class="exampleText">示例文本</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 属性相关。

浏览器兼容性

BCD tables only load in the browser

参见