-webkit-border-before

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

-webkit-border-before 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-topborder-rightborder-bottomborder-left 属性,具体取决于为 writing-modedirectiontext-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 属性相关。

浏览器兼容性

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
-webkit-border-before
Non-standard

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
No support
No support
Non-standard. Check cross-browser support before using.

参见