使用CSS绘制横线竖线
CSS不仅可以用来设置元素的字体、背景和布局，还可以利用CSS绘制简单的形状，比如横线和竖线。本文将介绍如何使用CSS绘制横线竖线。
绘制横线
要绘制横线，我们可以使用CSS中的border属性。border是一个设置元素边框的属性，它是以边框的形式绘制的，所以只需要设置好相应的边框宽度、颜色和样式即可。
/* 绘制一条1像素高的横线 */
hr {
border: 1px solid black; /* 边框宽度为1像素，样式为实线，颜色为黑色 */
}
上面的代码设置了一个hr元素的边框样式为1像素宽的黑实线，也就是绘制了一条1像素高的黑色横线。我们可以在HTML页面中使用hr标签来插入这条横线，如下所示：
这是一段文字。
这是另一段文字。
运行该代码，即可在这两段文字之间插入一条黑色横线。
绘制竖线
要绘制竖线，我们可以使用CSS中的伪元素:before或:after。伪元素是一种特殊的CSS选择器，它可以在元素的前面或后面插入内容（或图像），并且这个内容（或图像）不是HTML中的实际内容，也不会影响页面的文档流和布局。
我们可以利用:before或:after伪元素来绘制一个宽度为0，高度为父元素高度的竖线，然后再设置宽度和颜色即可。
/* 绘制一条1像素宽的竖线 */
div {
position: relative; /* 让div元素成为伪元素的相对定位容器 */
width: 200px;
height: 300px;
}
div:before {
content: ''; /* 插入一个空内容，占据伪元素的空间 */
position: absolute; /* 让伪元素绝对定位在div元素中 */
top: 0;
left: 0;
width: 0;
height: 100%; /* 竖线高度等于父元素高度 */
border-left: 1px solid black; /* 竖线边框宽度为1像素，样式为实线，颜色为黑色 */
}
上面的代码设置一个div元素的宽度为200像素，高度为300像素，并在其伪元素:before中绘制了一个宽度为1像素，颜色为黑色的竖线。我们可以在HTML页面中使用该div元素来插入这条竖线，如下所示：
这是一个div元素。
运行该代码，即可在该div元素的左侧插入一条黑色竖线。
如果想绘制多条竖线，可以利用margin-left属性来设置竖线之间的距离。例如，要绘制两条竖线，可以按照下面的代码来设置：
/* 绘制两条1像素宽的竖线 */
div {
position: relative;
width: 200px;
height: 300px;
}
div:before,
div:after {
content: ''; /* 插入空内容，占据伪元素的空间 */
position: absolute;
top: 0;
width: 0;
height: 100%;
border-left: 1px solid black;
}
div:before {
left: 0; /* 第一条竖线在div元素左侧 */
}
div:after {
right: 0; /* 第二条竖线在div元素右侧 */
margin-left: 10px; /* 两条竖线之间的距离为10像素 */
}
上面的代码设置了一个div元素，在其伪元素:before和:after中分别绘制了两条宽度为1像素，颜色为黑色的竖线，并且设置了它们之间的距离为10像素。
总结
使用CSS绘制横线和竖线可以在页面布局中起到很好的分隔和装饰作用，可以让页面更加美观和有层次感。在绘制竖线时，需要利用:before或:after伪元素来插入竖线，可以利用它们的相对或绝对定位以及宽度、高度和边框等属性来设置竖线的位置和样式。