这篇翻译不完整。请帮忙从英语翻译这篇文章。
摘要
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) |