您正在阅读此内容的英文版本，因为该语系尚未翻译。 帮助我们翻译此文章吧！
CSS属性 border-left 是属性border-left-color, border-left-style, 和border-left-width的三者的缩写。这些属性都是在描述一个元素的左边的边框border。
border-left: 1px; border-left: 2px dotted; border-left: medium dashed green;
这三种属性值的缩写需要按照顺序定义数值，也可以省略其中的一个或者两个。
和CSS所有的缩写属性一样，border-left 总是会设置该缩写属性所包含的全部属性值，即使开发者并没有一一指定这些值。CSS缩写属性会给没有被定义的属性一个默认的属性值。那就意味着下面这个例子......
border-left-style: dotted; border-left: thick green;
......实际上应该是下面这个样子......
border-left-style: dotted; border-left: none thick green;
......并且在 border-left 之前定义的 border-left-style 的值也会被覆盖。由于 border-left-style 的默认值是 none, border-style的最终结果就是没有边框。
| 初始值 | as each of the properties of the shorthand:
|
|---|---|
| 适用元素 | all elements. It also applies to ::first-letter. |
| 是否是继承属性 | 否 |
| 适用媒体 | visual |
| 计算值 | as each of the properties of the shorthand:
|
| Animation type | as each of the properties of the shorthand:
|
| 正规顺序 | order of appearance in the formal grammar of the values |
Syntax
这三种属性值的缩写需要按照顺序定义数值，也可以省略其中的一个或者两个。
Values
<br-width>- 请参阅
border-left-width. <br-style>- 请参阅
border-left-style. <color>- 请参阅
border-left-color.
Formal syntax
<line-width> || <line-style> || <color>where
<line-width> = <length> | thin | medium | thick
<line-style> = none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset
<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>
Example
<div> This box has a border on the left side. </div>
div {
border-left: 4px dashed blue;
background-color: gold;
height: 100px;
width: 100px;
font-weight: bold;
text-align: center;
}
Specifications
| Specification | Status | Comment |
|---|---|---|
| CSS Backgrounds and Borders Module Level 3 border-left |
Candidate Recommendation | No direct changes, though the modification of values for the border-left-color do apply to it. |
| CSS Level 2 (Revision 1) border-left |
Recommendation | No significant changes. |
| CSS Level 1 border-left |
Recommendation | Initial definition. |
Browser compatibility
| Feature | Chrome | Edge | Firefox (Gecko) | Internet Explorer | Opera | Safari (WebKit) |
|---|---|---|---|---|---|---|
| Basic support | 1.0 | (Yes) | 1.0 (1.7 or earlier) | 4 | 3.5 | 1.0 (85) |
| Feature | Android | Edge | Firefox Mobile (Gecko) | IE Phone | Opera Mobile | Safari Mobile |
|---|---|---|---|---|---|---|
| Basic support | 1.0 | (Yes) | 1.0 (1.0) | (Yes) | (Yes) | (Yes) |