摘要
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:
|
| Animation type | 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.
标准语法
<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>
示例
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) |