定义和用法
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。 |
浏览器支持
表中的数字指定了完全支持border-bottom
属性的第一个浏览器版本。
![]() |
![]() |
![]() |
![]() |
![]() |
Chrome | IE / Edge | Firefox | Safari | Opera |
1.0 | 4.0 | 1.0 | 3.5 | 1.0 |
注释:IE7 以及更早版本的浏览器不支持值 "inherit"。IE8 需要 !DOCTYPE。IE9 支持 "inherit"。
相关页面
CSS 教程:CSS 边框
CSS 参考手册:CSS border 属性
CSS 参考手册:CSS border-top 属性
CSS 参考手册:CSS border-right 属性
CSS 参考手册:CSS border-left 属性
评论区 0
发表评论
教程介绍
CSS 参考手册全面涵盖选择器、盒模型,文本属性等,助您快速检索 CSS 使用方法。
87
章节
18
阅读
0
评论
反馈提交成功
感谢您的反馈,我们将尽快处理您的反馈