介绍css画横线
CSS是一门用来描述文档外观的语言，它可以通过一系列的CSS属性来实现文本中的横线设置。在本篇文章中，我们将会讨论在CSS中如何绘制横线。
使用CSS text-decoration属性绘制横线
CSS的text-decoration属性可以用来绘制各种装饰线，包括下划线、删除线、和横线。使用text-decoration属性，可以轻松地将横线添加到网页中的文本中。
添加下划线
添加下划线是通过在CSS中设置text-decoration属性来实现的。下面的代码演示了如何添加文本下划线。
p {
text-decoration: underline;
}
text-decoration属性可以设置成以下几个值，以实现所需的效果：
none：默认值，表示没有装饰线。
underline：添加下划线。
overline：添加上划线。
line-through：在文本中间添加删除线。
blink：在文本闪烁一段时间后添加下划线。不推荐使用，因为会导致页面出现可读性问题。
因为text-decoration将会应用到文档中的任何文本，所以需要选择性地用CSS控制具体元素中的text-decoration属性。例如，在上面的代码中，我们将所有p元素应用下划线，但是很可能我们只想要某个特定的文本或元素应用下划线。这时，我们需要使用选择符来选择性地应用下划线。
在指定元素中应用下划线
要在某些元素中选择地添加下划线，可以通过在选择器中添加文本使用CSS text-decoration属性来实现。下面的代码展示了如何在一个超链接中应用下划线。
a.underline {
text-decoration: underline;
}
在这个例子中，我们给类名为“underline”的超链接添加下划线，而不是所有的超链接。在HTML中的超链接示例如下：
<a href="#" class="underline">这是一个超链接</a>
这个a元素将会在被应用了“underline”类名后添加下划线。
使用CSS border属性绘制横线
border属性是用来设置元素边框的属性，它包括宽度、样式和颜色。通过设置宽度为0并仅绘制下边框，我们可以用CSS的border属性在指定元素下方绘制一条横线。
绘制下边框的CSS代码
下面的代码演示了如何在所有p元素下方绘制一条横线。
p {
border-bottom: 1px solid #000;
}
在这个例子中，我们设置了1px的实线（solid）颜色为#000的下边框，让它看起来像一条横线。
指定长度和位置的CSS代码
我们可以通过细调边框的属性来调整横线的长度和位置。下面的代码演示了如何在一个框中使用边框绘制横线。
.box {
width: 100px;
height: 50px;
border-bottom: 2px solid #000;
}
在这个例子中，我们设置了一个宽度为100px、高度为50px的元素为box。然后，我们将元素的下边框设置为2px的实线，让它看起来像一条横线。
总结
在本文中，我们已经学会了如何使用CSS来绘制横线。我们可以使用text-decoration属性来添加下划线、删除线和其他装饰性线条，也可以使用border属性仅添加下边框，以实现我们需要的效果。我们可以通过调整这些属性来精细地制作高质量的设计，以提高网页的可读性和美观度。