border-bottom

跳转到：
  1. 摘要
  2. 语法
  3. 示例
  4. 规则
  5. 浏览器支持状况

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

摘要

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 typeas 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 初始定义

浏览器支持状况

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

文档标签和贡献者

此页面的贡献者： wbamberg, SolitudeRA
最后编辑者: wbamberg,