-webkit-border-before

在此页

句法
形式定义
形式句法
范例
规范
浏览器兼容性
另请参阅
相关话题

非标
此特征是非标准的，且不在标准轨道中。不要在面向 Web 的生产站点中使用它：它不适用于每个用户。实现之间可能存在大的不兼容性，且行为将来可能改变。

-webkit-border-before CSS property is a shorthand property for setting the individual logical block start border property values in a single place in the style sheet.

/* 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 can be used to set the values for one or more of: -webkit-border-before-width , -webkit-border-before-style ，和 -webkit-border-before-color . It maps to a physical border depending on the element's writing mode, directionality, and text orientation. It corresponds to the border-top , border-right , border-bottom ，或 border-left property depending on the values defined for writing-mode , direction ，和 text-orientation .

It relates to -webkit-border-after , -webkit-border-start ，和 -webkit-border-end , which define the other borders of the element.

This property is on the standard track as border-block-start .

句法

值

One or more of the following, in any order:

<'border-width'>: 见 border-width
<'border-style'>: 见 border-style
<'color'>: 见 color

形式定义

初始值	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
适用于	所有元素
继承	yes
百分比	as each of the properties of the shorthand: `-webkit-border-before-width` : logical-width of containing block
计算值	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` ：如指定 `border-left-style` ：如指定 `border-right-style` ：如指定 `border-top-style` ：如指定 `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

形式句法

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

范例

Applying a border with vertical text

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

结果

规范

Not part of any standard, but it relates to the standards-track border-block-start 特性。

浏览器兼容性

The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. 更新 GitHub 上的兼容性数据

	Desktop						Mobile
	Chrome	Edge	Firefox	Internet Explorer	Opera	Safari	Android webview	Chrome for Android	Firefox for Android	Opera for Android	Safari on iOS	Samsung Internet
`-webkit-border-before` 非标	Chrome 完整支持 8	Edge 完整支持 79	Firefox 不支持 No	IE 不支持 No	Opera 完整支持 15	Safari 完整支持 5.1	WebView Android 完整支持 37	Chrome Android 完整支持 18	Firefox Android 不支持 No	Opera Android 完整支持 15	Safari iOS 完整支持 5.1	Samsung Internet Android 完整支持 1.0

图例

完整支持
不支持
非标。预期跨浏览器支持较差。

另请参阅

border-block-start
The mapped physical properties: border-top , border-right , border-bottom ，和 border-left
writing-mode , direction , text-orientation

元数据

最后修改： Jul 24, 2020

在此页

句法

值