CSS - border-bottom-width

CSS **border-bottom-width** 属性设置元素底部边框的宽度。为了使用此属性，必须声明 border-style 或 border-bottom-style。

语法

border-bottom-width: medium | thin | thick | length | initial | inherit;

属性值

值	描述
medium	指定底部边框中等宽度。默认值。
thin	指定细的底部边框。
thick	指定粗的底部边框。
length	底部边框厚度可以使用值指定。
initial	将属性设置为其默认值。
inherit	从父元素继承此属性。

CSS 底部边框宽度属性示例

以下示例使用不同的值解释 **border-bottom-width** 属性。

中等底部边框宽度

要为 **border-bottom-width** 设置中等边框，我们使用 medium 值。在以下示例中，使用了 medium 值。

示例

<!DOCTYPE html>
<html>

<head>
    <style>
        p {
            padding: 10px;
            border: 1px solid;
            border-bottom-width: medium;
        }

        h3 {
            padding: 10px;
            border: 1px dashed;
            border-bottom-width: medium;
        }
    </style>
</head>

<body>
    <h2>
        CSS border-bottom-width property
    </h2>
    <h3>
        This shows border-bottom-width property 
        with medium value.
    </h3>
    <p>
        This shows border-bottom-width property 
        with medium value.
    </p>
</body>

</html>

细的底部边框宽度

要为 **border-bottom-width** 设置细边框，我们使用 thin 值。在以下示例中，使用了 thin 值。

示例

<!DOCTYPE html>
<html>

<head>
    <style>
        p {
            padding: 10px;
            border: 3px solid;
            border-bottom-width: thin;
        }

        h3 {
            padding: 10px;
            border: 3px dashed;
            border-bottom-width: thin;
        }
    </style>
</head>

<body>
    <h2>
        CSS border-bottom-width property
    </h2>
    <h3>T
        his shows border-bottom-width property 
        with thin value.
    </h3>
    <p>
        This shows border-bottom-width property 
        with thin value.
    </p>
</body>

</html>

粗的底部边框宽度

要为 **border-bottom-width** 设置粗边框，我们使用 thick 值。在以下示例中，使用了 thick 值。

示例

<!DOCTYPE html>
<html>

<head>
    <style>
        p {
            padding: 10px;
            border: 1px solid;
            border-bottom-width: thick;
        }

        h3 {
            padding: 10px;
            border: 1px dashed;
            border-bottom-width: thick;
        }
    </style>
</head>

<body>
    <h2>
        CSS border-bottom-width property
    </h2>
    <h3>
        This shows border-bottom-width property 
        with thick value.
    </h3>
    <p>
        This shows border-bottom-width property 
        with thick value.
    </p>
</body>

</html>

自定义底部边框宽度

要设置 **border-bottom-width** 的边框厚度，我们可以根据自己的选择指定厚度值。在以下示例中，使用了 15px 厚度值。

示例

<!DOCTYPE html>
<html>

<head>
    <style>
        p {
            padding: 10px;
            border: 1px solid;
            border-bottom-width: 15px;
        }

        h3 {
            padding: 10px;
            border: 1px dashed;
            border-bottom-width: 15px;
        }
    </style>
</head>

<body>
    <h2>
        CSS border-bottom-width property
    </h2>
    <h3>
        This shows border-bottom-width property 
        with 15px value.
    </h3>
    <p>
        This shows border-bottom-width property 
        with 15px value.
    </p>
</body>

</html>

支持的浏览器

属性
border-bottom-width	1.0	4.0	1.0	1.0	3.5

css_properties_reference.htm

打印页面