CSS Border Bottom常用属性详解

一、border-bottom的基本使用

   border-bottom: 单位 边框样式 颜色;

border-bottom是css中用来设置底部边框的属性。

border-bottom的属性值包括三个，分别是：边框宽度（单位），边框样式（solid、dotted、dashed等）和边框颜色（十六进制代码或rgb颜色值）。

以下是一个简单的应用实例：

    <div style="border-bottom: 2px solid #F08080; padding-bottom: 10px;">
        <p>这是一段有底部边框的文字信息。</p>
    </div>

效果如下图所示：

二、border-bottom常用属性介绍

1. border-bottom-style

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

border-bottom-style是用来设置边框样式的属性。

取值说明：

• none：没有边框（默认）
• hidden：同none，但是打印的时候依然会有边框。
• dotted：点线边框
• dashed：虚线边框
• solid：实线边框（默认值）
• double：双线边框
• groove：3D向内凹陷边框
• ridge：3D向外凸出边框
• inset：3D向内凹陷边框
• outset：3D向外凸出边框

2. border-bottom-width

   border-bottom-width: 1px|medium|thin|thick;

border-bottom-width是用来设置边框宽度的属性。

取值说明：

• 1px：像素值
• medium：默认宽度
• thin：细线宽度
• thick：粗线宽度

3. border-bottom-color

   border-bottom-color: color|transparent;

border-bottom-color是用来设置边框颜色的属性。

取值说明：

• color：常用的颜色值或RGB颜色值
• transparent：透明，不显示颜色

4. border-bottom-image

    border-bottom-image: url("border.png")|none|initial|inherit;

border-bottom-image是用来设置边框图片的属性。

取值说明：

• url("border.png")：指定图片的路径
• none：无图片，默认值
• initial：默认值
• inherit：继承父元素的属性

三、其他Tips

1. 边框不影响元素大小

注意：设置border-bottom-style并不会影响元素的大小，仅仅会在底部绘制出一条边框线并呈现所设置的样式。

2. 边框可以设置为虚线、点线、实线和双线等

border-bottom-style属性可以设置为虚线、点线、实线和双线等样式。

3. 禁止底部折叠

虽然默认情况下，不同元素之间的底部边框会折叠在一起，但是我们可以加入一个 "border-collapse: separate;" 的属性来避免这种情况。

以下是一个具有明显折叠的底部边框：

    <div style="border-bottom: 1px solid black; height: 50px;">
        <p>这是第一个div</p>
    </div>
    <div style="border-bottom: 1px solid black; height: 50px;">
        <p>这是第二个div</p>
    </div>

效果如图所示：

添加border-collapse属性后再试一次：

    <div style="border-bottom: 1px solid black; height: 50px; border-collapse: separate;">
        <p>这是第一个div</p>
    </div>
    <div style="border-bottom: 1px solid black; height: 50px; border-collapse: separate;">
        <p>这是第二个div</p>
    </div>

4. 底部边框圆角效果

我们可以使用border-bottom-left-radius（设置左下角的圆角效果）和border-bottom-right-radius（设置右下角的圆角效果）来实现底部边框的圆角效果。

以下是一个简单的应用实例：

    <div style="border-bottom: 5px solid #ccc; border-bottom-left-radius: 10px; border-bottom-right-radius: 10px; height: 50px;">
        <p>这是一段带有圆角底部边框的文字信息。</p>
    </div>

效果如图所示：

总结

css的border-bottom属性是用来设置元素底部边框的。border-bottom-style、border-bottom-width和border-bottom-color是设置边框样式、宽度和颜色的常用属性。我们还可以利用border-bottom-image来设置边框的图片属性。在实际应用中，我们可以通过border-bottom-style属性设置为虚线、点线、实线和双线等样式，也可以使用border-bottom-left-radius和border-bottom-right-radius来实现底部边框的圆角效果。同时，我们可以注意到边框不影响元素的大小，并且要避免边框折叠的情况，我们可以在父元素中使用border-collapse属性来解决问题。