CSS border-bottom-style 属性

更新于 2024/7/8 3:09:00

❮ CSS border-bottom-right-radius 属性

CSS 参考手册

CSS border-bottom-width 属性 ❯

实例

设置底部边框的样式:

div {border-bottom-style: dotted;}

亲自试一试 »

下面有更多实例。

定义和用法

border-bottom-style 设置元素下边框的样式。

默认值:

none

继承性:

no

支持动画:

no. 阅读有关动画的信息

版本:

CSS1

JavaScript 语法:

object.style.borderBottomStyle="dotted"

测试一下

浏览器支持

表中的数字表示支持该属性的第一个浏览器版本。

属性

border-bottom-style

1.0

5.5

1.0

1.0

9.2

语法

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

属性值

值

描述

试一试

none

不指定边框。这是默认值

亲自试一试 »

hidden

与 "none" 相同。不过应用于表时除外，对于表，hidden 用于解决边框冲突。

亲自试一试 »

dotted

定义点状边框。

亲自试一试 »

dashed

定义虚线。

亲自试一试 »

solid

定义实线。

亲自试一试 »

double

定义双线。双线的宽度等于 border-width 的值。

亲自试一试 »

groove

定义 3D 凹槽边框。其效果取决于 border-color 的值。

亲自试一试 »

ridge

定义 3D 垄状边框。其效果取决于 border-color 的值。

亲自试一试 »

inset

定义 3D inset 边框。其效果取决于 border-color 的值。

亲自试一试 »

outset

定义 3D outset 边框。其效果取决于 border-color 的值。

亲自试一试 »

initial

将此属性设置为其默认值。请参阅 initial

亲自试一试 »

inherit

从其父元素继承此属性。请参阅 inherit

更多实例

实例

虚线底部边框:

div {border-bottom-style: dashed;}

亲自试一试 »

实例

实线底部边框:

div {border-bottom-style: solid;}

亲自试一试 »

实例

双实线底部边框:

div {border-bottom-style: double;}

亲自试一试 »

实例

删除底部边框:

div {border-bottom-style: none;}

亲自试一试 »

实例

槽底边框:

div { border-bottom-style: groove; border-bottom-color: coral; border-bottom-width: 7px;}

亲自试一试 »

实例

3D 垄状边框:

div { border-bottom-style: ridge; border-bottom-color: coral; border-bottom-width: 7px;}

亲自试一试 »

实例

3D inset 边框:

div { border-bottom-style: inset; border-bottom-color: coral; border-bottom-width: 7px;}

亲自试一试 »

实例

3D outset 边框:

div { border-bottom-style: outset; border-bottom-color: coral; border-bottom-width: 7px;}

亲自试一试 »

相关页面

CSS 教程: CSS 边框

CSS 参考手册: border-bottom 属性

HTML DOM 参考手册: borderBottomStyle 属性

❮ CSS border-bottom-right-radius 属性

CSS 参考手册

CSS border-bottom-width 属性 ❯