这篇翻译不完整。请帮忙从英语翻译这篇文章。
摘要
border-bottom 简写属性把下边框的所有属性: border-bottom-color,border-bottom-style 与 border-bottom-width设置到了一个声明中。这些属性描述了元素的下边框样式。
border-bottom的三个简记属性可以以任意顺序排列, 并且它们中的任意一个都可以被省略.
与所有的简记属性相同, border-bottom 定义了它所有可以定义的属性,即使他们并没有被显式地定义。它把所有未被显式定义的参数都设置为了默认值,这意味着这些值将被定义为:
border-bottom-style: dotted; border-bottom: thick green;
它和以下的代码是等价的:
border-bottom-style: dotted; border-bottom: none thick green;顺便一提,在
border-bottom 之前定义的 border-bottom-style的值因此被忽略了.
由于 border-bottom-style 并没有默认值, 未被定义的 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:
|
| 是否适用于 CSS 动画 | as each of the properties of the shorthand:
|
| 正规顺序 | order of appearance in the formal grammar of the values |
语法
border-bottom: 1px; border-bottom: 2px dotted; border-bottom: medium dashed blue;
值
<br-width>- 见
border-bottom-width. <br-style>- 见
border-bottom-style. <color>- 见
border-bottom-color.
标准语法
<br-width> || <br-style> || <color>where
<br-width> = <length> | thin | medium | thick
<br-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( <rgb-component>#{3} )
<rgba()> = rgba( <rgb-component>#{3} , <alpha-value> )
<hsl()> = hsl( <hue>, <percentage>, <percentage> )
<hsla()> = hsla( <hue>, <percentage>, <percentage>, <alpha-value> )
<named-color> = <ident>
<deprecated-system-color> = ActiveBorder | ActiveCaption | AppWorkspace | Background | ButtonFace | ButtonHighlight | ButtonShadow | ButtonText | CaptionText | GrayText | Highlight | HighlightText | InactiveBorder | InactiveCaption | InactiveCaptionText | InfoBackground | InfoText | Menu | MenuText | Scrollbar | ThreeDDarkShadow | ThreeDFace | ThreeDHighlight | ThreeDLightShadow | ThreeDShadow | Window | WindowFrame | WindowTextwhere
<rgb-component> = <integer> | <percentage>
<alpha-value> = <number>
<hue> = <number>
示例
element {
border-bottom: 1px solid #000;
}
规则
| 规则 | 状态 | 评价 |
|---|---|---|
| CSS Backgrounds and Borders Module Level 3 border-bottom |
Candidate Recommendation | 没有直接的改变,即使 border-bottom-color 值的修改被确定. |
| CSS Level 2 (Revision 1) border-bottom |
Recommendation | 没有显著的变化 |
| CSS Level 1 border-bottom |
Recommendation | 初始定义 |
浏览器支持状况
| Feature | Chrome | Firefox (Gecko) | Internet Explorer | Opera | Safari (WebKit) |
|---|---|---|---|---|---|
| Basic support | 1.0 | 1.0 (1.7 or earlier) | 4 | 3.5 | 1.0 (85) |
| Feature | Android | Firefox Mobile (Gecko) | IE Phone | Opera Mobile | Safari Mobile |
|---|---|---|---|---|---|
| Basic support | 1.0 | 1.0 (1.0) | (Yes) | (Yes) | (Yes) |