-webkit-border-before

非标准

这个功能是非标准的，不在标准轨道上。不要在面向 Web 的生产站点上使用它：它不适用于每个用户。实现之间也可能存在很大的不兼容性，并且行为在未来可能会发生变化。

-webkit-border-before CSS 属性是在样式表一个单一的地方设置单独的逻辑块开始 border 属性值的速记属性。

/* 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 可用于对一个或多个设置值：-webkit-border-before-width，-webkit-border-before-style，和-webkit-border-before-color。它根据元素的书写模式，方向性和文本方向映射到物理边界。它对应于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: border-width: as each of the properties of the shorthand: border-top-width: medium border-right-width: medium border-bottom-width: medium border-left-width: medium border-style: as each of the properties of the shorthand: border-top-style: none border-right-style: none border-bottom-style: none border-left-style: none color: Varies from one browser to another
适用于	all elements
继承	yes
百分比	as each of the properties of the shorthand: -webkit-border-before-width: logical-width of containing block
媒体	visual
计算值	as each of the properties of the shorthand: border-width: as each of the properties of the shorthand: border-bottom-width: the absolute length or 0 if border-bottom-style is none or hidden border-left-width: the absolute length or 0 if border-left-style is none or hidden border-right-width: the absolute length or 0 if border-right-style is none or hidden border-top-width: the absolute length or 0 if border-top-style is none or hidden border-style: as each of the properties of the shorthand: border-bottom-style: as specified border-left-style: as specified border-right-style: as specified border-top-style: as specified color: If the value is translucent, the computed value will be the rgba() corresponding one. If it isn't, it will be the rgb() corresponding one. The transparent keyword maps to rgba(0,0,0,0).
动画类型	discrete
规范的顺序	the unique non-ambiguous order defined by the formal grammar

border-width：作为速记的每个属性：

-  [`border-top-width`](border-top-width): `medium` 
-  [`border-right-width`](border-right-width): `medium` 
-  [`border-bottom-width`](border-bottom-width): `medium` 
-  [`border-left-width`](border-left-width): `medium`

border-style：作为速记的每个属性：

-  [`border-top-style`](border-top-style): `none` 
-  [`border-right-style`](border-right-style): `none` 
-  [`border-bottom-style`](border-bottom-style): `none` 
-  [`border-left-style`](border-left-style): `none`

color：因浏览器而异

Applies to all elements   [Inherited](inheritance) yes   Percentages as each of the properties of the shorthand:

-webkit-border-before-width：包含块的逻辑宽度

Media visual   [Computed value](computed_value) as each of the properties of the shorthand:

border-width：作为速记的每个属性：

-  [`border-bottom-width`](border-bottom-width): the absolute length or `0` if [`border-bottom-style`](border-bottom-style) is `none` or `hidden` 
-  [`border-left-width`](border-left-width): the absolute length or `0` if [`border-left-style`](border-left-style) is `none` or `hidden` 
-  [`border-right-width`](border-right-width): the absolute length or `0` if [`border-right-style`](border-right-style) is `none` or `hidden` 
-  [`border-top-width`](border-top-width): the absolute length or `0` if [`border-top-style`](border-top-style) is `none` or `hidden`

border-style：作为速记的每个属性：

-  [`border-bottom-style`](border-bottom-style): as specified
-  [`border-left-style`](border-left-style): as specified
-  [`border-right-style`](border-right-style): as specified
-  [`border-top-style`](border-top-style): as specified

color：如果该值是半透明的，则计算出的值将是rgba()相应的值。如果不是，那将是rgb()相应的一个。transparent关键字映射到rgba(0,0,0,0)。

Animation type discrete   Canonical order the unique non-ambiguous order defined by the formal grammar

语法

值

一个或多个以下任意顺序：

<'border-width'>See border-width<'border-style'>See border-style<'color'>See color

形式语法

<'border-width'> || <'border-style'> || <'color'>where <color> = <rgb()> | <rgba()> | <hsl()> | <hsla()> | <hex-color> | <named-color> | currentcolor | <deprecated-system-color>where <rgb()> = rgb( [ [ <percentage>{3} | <number>{3} ] [ / <alpha-value> ]? ] | [ [ <percentage>#{3} | <number>#{3} ] , <alpha-value>? ] )<rgba()> = rgba( [ [ <percentage>{3} | <number>{3} ] [ / <alpha-value> ]? ] | [ [ <percentage>#{3} | <number>#{3} ] , <alpha-value>? ] )<hsl()> = hsl( [ <hue> <percentage> <percentage> [ / <alpha-value> ]? ] | [ <hue>, <percentage>, <percentage>, <alpha-value>? ] )<hsla()> = hsla( [ <hue> <percentage> <percentage> [ / <alpha-value> ]? ] | [ <hue>, <percentage>, <percentage>, <alpha-value>? ] )where <alpha-value> = <number> | <percentage><hue> = <number> | <angle>

示例

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财产有关。

浏览器兼容性

Feature	Chrome	Firefox (Gecko)	Internet Explorer	Opera	Safari (WebKit)
Basic support	(Yes)	No support	No support	(Yes)	?

Feature	Android	Firefox Mobile (Gecko)	IE Phone	Opera Mobile	Safari Mobile
Basic support	?	No support	No support	?	?

本文档系腾讯云开发者社区成员共同维护，如有问题请联系 cloudcommunity@tencent.com

最后更新于：2017-12-18