Web速查-索引

border-bottom-style

定义

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

注意：只有当这个值不是 none 时边框才可能出现。

语法

border-bottom-style：none|hidden|A;

注意：A共有8种值，见下表所示。

属性值

值 说明
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 的值。
inherit 规定应该从父元素继承边框样式。

实例

<!DOCTYPE html>

<html>

<head>

    <meta charset="UTF-8">

    <title>NTHOME-零基础入门学习Web（HTML5+CSS3）</title>

    <style type="text/css">

        p {

            width: 222px;

            border-style:solid

        }

        .none {border-bottom-style:none}

        .dotted {border-bottom-style:dotted}

        .dashed {border-bottom-style:dashed}

        .solid {border-bottom-style:solid}

        .double {border-bottom-style:double}

        .groove {border-bottom-style:groove}

        .ridge {border-bottom-style:ridge}

        .inset {border-bottom-style:inset}

        .outset {border-bottom-style:outset}

    </style>

</head>

<body>

   <p class="none">No bottom border.</p>

   <p class="dotted"> dotted bottom border.</p>

   <p class="dashed"> dashed bottom border.</p>

   <p class="solid"> solid bottom border.</p>

   <p class="double"> double bottom border.</p>

   <p class="groove"> groove bottom border.</p>

   <p class="ridge"> ridge bottom border.</p>

   <p class="inset"> inset bottom border.</p>

   <p class="outset"> outset bottom border.</p>

</body>

</html>

No bottom border.

dotted bottom border.

dashed bottom border.

solid bottom border.

double bottom border.

groove bottom border.

ridge bottom border.

inset bottom border.

outset bottom border.

浏览器支持

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

Safari Chrome FireFox IE
6.0 3.0 4.0 9.0