非标准
该特性是非标准的,请尽量不要在生产环境中使用它!
-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
可以使用以下一个或多个值:
它根据元素的书写模式、方向以及文本方向映射到Border上. 对应到四个边框属性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:
|
---|---|
适用元素 | all elements |
是否是继承属性 | yes |
Percentages | as each of the properties of the shorthand:
|
计算值 | as each of the properties of the shorthand:
|
Animation type | discrete |
语法
可选择的值
按以下顺序,一个或多个值
<'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
属性有关,但现在并不存在与任何一标准规范。
兼容性
BCD tables only load in the browser
参考
border-block-start
- The mapped physical properties:
border-top
,border-right
,border-bottom
, andborder-left
writing-mode
,direction
,text-orientation