CSS border-bottom-style 属性

主题

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

定义和用法

border-bottom-style 是 CSS 中用于设置元素上边框样式的属性。

border-bottom-style 要使边框可见，必须同时设置 border-bottom-width 和 border-bottom-color 或使用简写属性。

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

常用的实例

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

实例代码运行代码

复制

.example {
    border-bottom-style: dotted;   /* dotted - 点线边框 */
    border-bottom-style: dashed;   /* dashed - 虚线边框 */
    border-bottom-style: solid;    /* solid - 实线边框 */
    border-bottom-style: double;   /* double - 双线边框 */
    border-bottom-style: groove;   /* groove - 3D凹槽边框（效果取决于边框颜色） */
    border-bottom-style: ridge;    /* ridge - 3D凸脊边框（效果取决于边框颜色） */
    border-bottom-style: inset;    /* inset - 3D内嵌边框（效果取决于边框颜色） */
    border-bottom-style: outset;   /* outset - 3D外凸边框（效果取决于边框颜色） */
    border-bottom-style: none;     /* none - 无边框 */
    border-bottom-style: hidden;   /* hidden - 隐藏边框（在表格中与none表现不同） */
}

CSS 语法

border-bottom-style: none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset;

属性值

值	描述
`none`	无边框（默认值）。
`hidden`	与 "none" 类似，但在表格边框冲突解决中有不同表现。
`dotted`	定义点状边框。
`dashed`	定义虚线边框。
`solid`	定义实线边框
`double`	定义双线边框。
`groove`	3D凹槽边框（效果取决于边框颜色）。
`ridge`	3D凸脊边框（效果取决于边框颜色）。
`inset`	3D内嵌边框（效果取决于边框颜色）。
`outset`	3D外凸边框（效果取决于边框颜色）。