健康资讯 border-bottom：如何用CSS样式实现页面底部分割线
在网页设计中，很多时候需要给元素添加分割线来区分不同的内容，而常见的分割线种类包括水平线、垂直线、虚线等等，其中最常用的应该就是水平线了。而在实现水平线时，最好的办法应该就是使用CSS样式中的“border-bottom”属性了。
1. border-bottom是什么？
border-bottom属性用于定义元素底部的边框的样式、宽度和颜色。它是CSS样式中的边框属性之一，其语法如下：
```
border-bottom: border-width border-style border-color;
```
其中：
- border-width为边框宽度，默认值为medium；
- border-style为边框样式，默认值为none；
- border-color为边框颜色，默认值为样式表中定义的颜色。
2. border-bottom的常用样式
border-bottom的样式有很多种，常见的几种样式如下：
2.1 实线底边框
```
border-bottom: 2px solid black;
```
这是最常见的底边框样式，它采用实线，宽度为2像素，颜色为黑色。
2.2 虚线底边框
```
border-bottom: 1px dashed #666;
```
虚线底边框的样式可以通过改变border-style的值来实现，这里采用dashed样式，宽度为1像素，颜色为#666。
2.3 实线底边框带有圆角
```
border-bottom: 2px solid #f00;
border-radius: 5px 5px 0 0;
```
如果需要给底边框添加圆角，可以使用border-radius属性来实现。其中，5px 5px代表左下角和右下角都要设置半径为5像素，0 0表示左上角和右上角没有圆角。
3. border-bottom不能这样用！
在使用border-bottom时，也有一些需要注意的地方。
3.1 不要使用float
由于浮动会导致元素脱离文档流，所以不要使用float属性来设置元素的border-bottom样式。
3.2 不要使用所有的样式
虽然CSS提供了多种样式供选择，但并不是所有的样式都适合用在border-bottom上，比如：outline、background-color等。
4. 看看效果吧！
最后，为了让大家更好地了解border-bottom的样式效果，我们提供一个简单的示例代码，供大家参考：
```
<meta charset="UTF-8">
border-bottom示例
<style type="text/css">
span {
border-bottom: 2px solid #f00;
padding: 5px;
margin: 0 10px;
font-weight: bold;
font-family: Arial, sans-serif;
}
</style>
<body>
border-bottom示例
实线底边框
虚线底边框
实线底边框带有圆角