border-bottom

border-bottom 简写属性把下边框的所有属性:border-bottom-colorborder-bottom-styleborder-bottom-width 设置到了一个声明中。这些属性描述了元素的下边框样式。

与所有的简记属性相同, 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 参数的值将被设置为 none,也就是无底边框。

语法

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>

示例

<div>
  This box has a border on the bottom side.
</div>
div {
  border-bottom: 4px dashed blue;
  background-color: gold;
  height: 100px;
  width: 100px;
  font-weight: bold;
  text-align: center;
}

规则

规则 状态 评价
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 初始定义。

浏览器兼容性

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
border-bottomChrome Full support 1Edge Full support 12Firefox Full support 1IE Full support 4Opera Full support 3.5Safari Full support 1WebView Android Full support 1Chrome Android Full support 18Firefox Android Full support 4Opera Android Full support 14Safari iOS Full support 1Samsung Internet Android Full support 1.0

Legend

Full support  
Full support