-webkit-border-before

非标准：此功能是非标准的，并且不在标准轨道上。请勿在面向 Web 的生产网站上使用它：它不会对每个用户都起作用。实现之间也可能存在很大的不兼容性，并且行为将来可能会发生变化。

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

值

以下之一或多个，按任意顺序

<'border-width'>

参见 border-width

<'border-style'>

参见 border-style

<'color'>

参见 color

描述

-webkit-border-before 属性映射到物理边框，具体取决于元素的书写模式、方向和文本方向。根据为 writing-mode、direction 和 text-orientation 定义的值，它对应于 border-top、border-right、border-bottom 或 border-left 属性。

它与 -webkit-border-after、-webkit-border-start 和 -webkit-border-end 相关，它们定义了元素的其他边框。

此属性的标准轨道等效项是 border-block-start。

正式定义

初始值与简写属性的每个属性相同
应用于所有元素
继承是
百分比与简写属性的每个属性相同
计算值与简写属性的每个属性相同
动画类型离散型

正式语法

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

示例

应用带有垂直文本的边框

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 表格仅在浏览器中加载

另请参阅