二、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
这是第二个div
效果如图所示：
添加border-collapse属性后再试一次：
这是第一个div
这是第二个div
4. 底部边框圆角效果
我们可以使用border-bottom-left-radius（设置左下角的圆角效果）和border-bottom-right-radius（设置右下角的圆角效果）来实现底部边框的圆角效果。
以下是一个简单的应用实例：
这是一段带有圆角底部边框的文字信息。
效果如图所示：
总结
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属性来解决问题。
