-webkit-border-before

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

-webkit-border-before 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: unset;

-webkit-border-before 可以使用以下一个或多个值：

  1. -webkit-border-before-width
  2. -webkit-border-before-style
  3. -webkit-border-before-color.

它根据元素的书写模式、方向以及文本方向映射到 Border 上。对应到四个边框属性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.

初始值as each of the properties of the shorthand:
适用元素all elements
是否是继承属性yes
Percentagesas each of the properties of the shorthand:
计算值as each of the properties of the shorthand:
Animation typediscrete

语法

可选择的值

按以下顺序，一个或多个值

<'border-width'>

参考 border-width

<'border-style'>

参考 border-style

<'color'>

参考 color

形式语法

Error: could not find syntax for this item

示例

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 属性有关，但现在并不存在与任何一标准规范。

浏览器兼容性

BCD tables only load in the browser

参见