/* 绘制一条水平线 */
hr {
border: none;
height: 1px;
background-color: black;
}上述CSS代码绘制了一条水平线，它的高度为1个像素，颜色为黑色。border:none属性是用来取消边框的，这里用来取消hr标签的默认边框线。这种方法可以用在一些分割区域的情况下，增加网页的美观度。
/*制作虚线*/
.dotted{
border-top: 1px dotted #999;
}
/*制作实线*/
.solid{
border-top: 1px solid #999;
}
/*绘制双线*/
.double{
border-top: 3px double #999;
}上述CSS代码分别绘制了点线、实线和双线。使用border-top属性选择上边框进行绘制，并设置线的粗细和颜色。通过调节这些属性可以实现各种样式的线条，丰富网页的设计效果。
/* 制作斜线 */
.diagonal{
width: 50px;
height: 50px;
border: 1px solid #999;
transform:rotate(45deg);
-webkit-transform: rotate(45deg);/* Safari 和 Chrome */
-moz-transform: rotate(45deg);/* Firefox */
-ms-transform: rotate(45deg);/* IE 9 */
-o-transform: rotate(45deg);/* Opera */
}上述CSS代码用transform属性绘制了一条斜线，并设置了旋转角度和边框样式。其中，rotate属性用来控制上述代码所绘制的斜线的角度。通过设置不同的角度，可以实现各种角度的斜线。
总之，CSS中的线条绘制功能相当强大，通过设置不同的属性，可以实现各种样式的线条，增加网页的美观度。同时，CSS的线条绘制也有利于增加页面的可读性和用户体验，用好这一功能对于网页的设计和开发是非常有帮助的。