border-bottom

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参数的值将被设置为none，也就是无底边框。

示例

border-bottom: 1px;
border-bottom: 2px dotted;
border-bottom: medium dashed blue;

浏览器支持

语法

• 如使用该复合属性定义其单个参数，则其他参数的默认值将无条件覆盖各自对应的单个属性设置。
• 对应的脚本特性为borderBottom。

取值

• border-bottom-width：设置或检索对象边框宽度。取值| thin| medium| thick。参见border-bottom-width。
• border-bottom-style：设置或检索对象边框样式。参见border-bottom-style。
• border-bottom-color：设置或检索对象边框颜色。参见border-bottom-color。

例子

border-bottom: solid;
border-bottom: dashed red;
border-bottom: 1rem solid;
border-bottom: thick double #32a1ce;
border-bottom: 4mm ridge rgb(170, 50, 220, .6);

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

鹏仔微信 15129739599 鹏仔QQ344225443 鹏仔前端 pjxi.com 共享博客 sharedbk.com