-webkit-border-before

翻译不完整。 请帮助我们翻译这篇文章!

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

-webkit-border-before 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-topborder-rightborder-bottomborder-left ,具体取决于 writing-modedirectiontext-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:
适用媒体visual
计算值as each of the properties of the shorthand:
Animation typediscrete
正规顺序the unique non-ambiguous order defined by the formal grammar

语法

可选择的值

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

<'border-width'>
参考 border-width
<'border-style'>
参考 border-style
<'color'>
参考 color

Formal syntax

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

where
<color> = <rgb()> | <rgba()> | <hsl()> | <hsla()> | <hex-color> | <named-color> | currentcolor | <deprecated-system-color>

where
<rgb()> = rgb( <percentage>{3} [ / <alpha-value> ]? ) | rgb( <number>{3} [ / <alpha-value> ]? ) | rgb( <percentage>#{3} , <alpha-value>? ) | rgb( <number>#{3} , <alpha-value>? )
<rgba()> = rgba( <percentage>{3} [ / <alpha-value> ]? ) | rgba( <number>{3} [ / <alpha-value> ]? ) | rgba( <percentage>#{3} , <alpha-value>? ) | rgba( <number>#{3} , <alpha-value>? )
<hsl()> = hsl( <hue> <percentage> <percentage> [ / <alpha-value> ]? ) | hsl( <hue>, <percentage>, <percentage>, <alpha-value>? )
<hsla()> = hsla( <hue> <percentage> <percentage> [ / <alpha-value> ]? ) | hsla( <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 属性有关,但现在并不存在与任何一标准规范。

兼容性

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
-webkit-border-before
Non-standard
Chrome Full support 8Edge No support NoFirefox No support NoIE No support NoOpera Full support 15Safari Full support 5.1WebView Android Full support 37Chrome Android Full support 18Firefox Android No support NoOpera Android Full support 15Safari iOS Full support 5.1Samsung Internet Android Full support 1.0

Legend

Full support  
Full support
No support  
No support
Non-standard. Expect poor cross-browser support.
Non-standard. Expect poor cross-browser support.

参考