CSS border-bottom 属性

主题

默认模式
浅蓝色模式
淡绿色模式
深夜模式

定义和用法

border-bottom 是一个简写属性，借助它可以一次性设置元素底部的边框宽度、边框样式和边框颜色。

border-bottom 简写属性三个值的顺序可以任意调换，而且这三个值都不是必需的。不过，在实际使用时，至少要指定 style 值，因为如果没有样式，边框就不会显示出来。

默认值：	medium none color
继承性：	否
可动画性：	支持。请参阅：可动画属性。
版本：	CSS1
JavaScript 语法：	object.style.borderBottom="15px dotted lightblue"

常用的实例

下面通过一些示例，让你更直观地了解 border-bottom 属性的用法：

实例代码运行代码

复制

/* 只设置边框样式为实线 */
p { border-bottom: solid; }

/* 设置边框宽度和样式 */
h1 { border-bottom: 3px dashed;}

/* 设置边框样式和颜色 */
div { border-bottom: dotted blue;}

/* 完整设置边框宽度、样式和颜色 */
span { border-bottom: 2px double #ff9900;}

/* 使用相对单位设置边框宽度 */
button { border-bottom: thick solid green;}

CSS 语法

border-bottom: border-width border-style border-color|initial|inherit;

属性值

值	描述
`border-bottom-width`	规定下边框的宽度。参阅：border-bottom-width 中可能的值。
`border-bottom-style`	规定下边框的样式。参阅：border-bottom-style 中可能的值。
`border-bottom-color`	规定下边框的颜色。参阅：border-bottom-color 中可能的值。
`initial`	将此属性设置为其默认值。参阅 initial。
`inherit`	从其父元素继承此属性。参阅 inherit。