CSS中的垂直和水平線可以在網頁上增加圖形效果，提高頁面布局和設計的美觀程度。垂直線通常用于分隔內容區域和側欄區域，而水平線通常用于分隔文章的段落或標題。

/* 水平線樣式 */
hr {
border: none;
height: 1px;
background-color: #ddd;
}
/* 垂直線樣式 */
.vertical-line {
border-left: 2px solid #ccc;
height: 500px;
position: absolute;
left: 50%;
margin-left: -1px;
}

水平線的樣式可以通過CSS的hr標簽進行設置，這個標簽默認會生成一條水平的線，通常情況下需要通過CSS設置樣式。使用border:none去除默認邊框，然后設置height為1px來定義線的粗細，最后通過background-color屬性定義線的顏色。

垂直線的樣式可以通過設置div元素的border-left屬性來實現。其中div元素需要設置高度和寬度，通過height屬性控制長度。同時，采用絕對定位將垂直線放在需要的位置上，通過left屬性控制垂直線與左邊的距離。最后再左偏移margin-left：-1px抵消實線粗度1px的一半。

總的來說，CSS中的垂直和水平線可以為網頁的布局和設計提供更多的選擇和變化，如果合理使用會為用戶提供更好的閱讀體驗。