-webkit-border-before

构成属性

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

• -webkit-border-before-color
• -webkit-border-before-style
• -webkit-border-before-width

语法

/* 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 属性根据元素的书写模式、方向性和文本方向映射到物理边框。它对应于 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

<div>
  <p class="exampleText">Example text</p>
</div>

CSS

div {
  background-color: yellow;
  width: 120px;
  height: 120px;
}

.exampleText {
  writing-mode: vertical-rl;
  -webkit-border-before: 5px dashed blue;
}

结果

规范

不属于任何标准，但与标准追踪的 border-block-start 属性相关。

浏览器兼容性

另见

• border-block-start
• 映射的物理属性：border-top、border-right、border-bottom 和 border-left
• writing-mode、direction、text-orientation