CSS中的垂直水平線是一種常用的視覺(jué)元素，可以用于分隔內(nèi)容，劃分頁(yè)面結(jié)構(gòu)，提高頁(yè)面設(shè)計(jì)的美感和可讀性。下面介紹一些實(shí)現(xiàn)垂直水平線的方法。

1. 使用border屬性

// 水平線
border-top: 1px solid #ccc;
// 垂直線
border-left: 1px solid #ccc;

2. 使用偽元素::before或::after

// 水平線
.content::before {
content: "";
display: block;
height: 1px;
background-color: #ccc;
}
// 垂直線
.content::after {
content: "";
display: block;
width: 1px;
background-color: #ccc;
}

3. 使用padding和background-color

// 水平線
.content {
padding-top: 10px;
padding-bottom: 10px;
background-color: #ccc;
}
// 垂直線
.content {
padding-left: 10px;
padding-right: 10px;
background-color: #ccc;
}

以上方法都可以實(shí)現(xiàn)垂直水平線的效果，選擇適合自己的方法即可。需要注意的是，這些方法都可以通過(guò)CSS進(jìn)一步進(jìn)行調(diào)整樣式，例如線條粗細(xì)、顏色等。