border-bottom

border-bottom属性是用于设置元素底部边框的宽度，颜色和样式的简写属性。

border-bottom 属性可以同时设置一个元素的属性、属性和属性。

border-bottom 属性可以接收1个、2个或3个属性值，没有设置的值会被使用它们的初始值。

border-bottom 属性中的值的顺序是可以任意的。如果你单独设置了某个底部边框的属性之后在再使用 border-bottom 属性来设置底部边框样式，那么 border-bottom 属性中的值会覆盖前面设置的值，没有被设置的值使用它的默认值。例如：

border-bottom-style: dotted;
border-bottom: thick green;                              
                            

上面的代码等效于：

border-bottom-style: dotted;
border-bottom: none thick green;                              
                            

由于在 border-bottom 属性中的没有给出属性，它会被设置为初始值 none ，前面设置的 border-bottom-style: dotted; 将会被忽略。

官方语法

border-bottom: <line-width> || <line-style> || <color>                             
                            

参数：

<line-width> ：底部边框的宽度。详细信息可以查看属性。 <line-style> ：底部边框的样式。详细信息可以查看属性。 <color> ：底部边框的颜色。详细信息可以查看属性。

border-bottom 属性的初始值为：

border-bottom-width: medium
border-bottom-style: none
border-bottom-color: currentColor                              
                            

下面是 border-bottom 属性取值的示例代码：

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

在线演示

下面的例子为元素设置10像素的绿色底部实线边框。

底部边宽度为10像素绿色实线

浏览器支持

所有的现代浏览器都支持 border-bottom 属性，包括Chrome，Firefox，Safari，Opera，IE 以及 Android 和 iOS。

查看更多关于border-bottom的详细内容...