border-left

跳转到：
  1. Syntax
  2. Example
  3. Specifications
  4. Browser compatibility

这篇翻译不完整。请帮忙从英语翻译这篇文章。

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

We're converting our compatibility data into a machine-readable JSON format. This compatibility table still uses the old format, because we haven't yet converted the data it contains. Find out how you can help!

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)

文档标签和贡献者

标签： 
此页面的贡献者： mdnwebdocs-bot, Huooo
最后编辑者: mdnwebdocs-bot,