CSS中的分割线是网页设计中常用的一种元素，它可以将页面的内容进行分隔，让网站的内容更加清晰明了。常见的分割线有水平和垂直的两种，下面我们就来具体讲解一下如何使用CSS来实现这些分割线。

首先，我们先来看一下如何创建水平分割线。在CSS中，我们可以通过设置border属性来实现这个效果。具体来说，我们可以设置border-bottom的值来给网页添加一个底部边框，从而实现水平分割线的效果。代码如下：

.line {
border-bottom: 2px solid #ccc;
}

上面这段代码中，我们为line类添加了一个底部边框，边框的宽度为2px，颜色为#ccc。这里我们使用的是solid样式，表示边框是实线，还可以使用dotted、dashed等样式来实现不同的效果。

除了设置border-bottom属性，我们还可以通过设置伪元素:before或:after来实现水平分割线的效果。具体代码如下：

.line::after {
content: "";
display: block;
height: 1px;
width: 100%;
background-color: #ccc;
}

上面这段代码中，我们使用伪元素::after来创建一个内容为空的块元素，并将其设置为块级元素，高度为1px，宽度为100%，背景颜色为#ccc。这样就可以实现一个水平分割线的效果了。

接下来，我们来看一下如何创建垂直分割线。在CSS中，我们可以使用height属性来控制元素的高度，从而实现垂直分割线的效果。代码如下：

.line {
height: 100%;
border-left: 2px solid #ccc;
}

上面这段代码中，我们为line类添加了一个左边边框，边框的宽度为2px，颜色为#ccc。同时，我们还将line类的高度设置为100%，这样就可以实现一个垂直分割线的效果了。

除了设置border-left属性，我们还可以通过设置伪元素:before或:after来实现垂直分割线的效果。具体代码如下：

.line::after {
content: "";
display: block;
height: 100%;
width: 1px;
background-color: #ccc;
}

上面这段代码中，我们使用伪元素::after来创建一个内容为空的块元素，并将其设置为块级元素，高度为100%，宽度为1px，背景颜色为#ccc。这样就可以实现一个垂直分割线的效果了。