在CSS中，我們可以通過設置邊框屬性來實現橫豎線的效果。邊框屬性包括border-style、border-width和border-color。下面我們分別來看一下如何使用這些屬性實現橫豎線的效果。

首先，我們來看如何使用border-bottom屬性實現橫線的效果。border-bottom屬性用于設置元素底部的邊框，我們可以通過設置邊框寬度和顏色來實現橫線的效果。例如：

div {
border-bottom: 1px solid #ccc;
}

以上代碼將在div元素的底部添加一條寬度為1像素、顏色為#ccc的橫線。如果我們希望橫線距離元素的底部有一定的距離，可以使用padding-bottom屬性來設置。例如：

div {
padding-bottom: 10px;
border-bottom: 1px solid #ccc;
}

接下來，我們來看如何使用border-right屬性實現豎線的效果。border-right屬性用于設置元素右側的邊框，我們可以通過設置邊框寬度和顏色來實現豎線的效果。例如：

div {
border-right: 1px solid #ccc;
height: 100px;
}

以上代碼將在div元素的右側添加一條寬度為1像素、顏色為#ccc的豎線。需要注意的是，我們需要為元素設置高度，否則豎線將不會顯示。如果我們希望豎線距離元素的右側有一定的距離，可以使用padding-right屬性來設置。例如：

div {
padding-right: 10px;
border-right: 1px solid #ccc;
height: 100px;
}

最后，我們來看如何同時實現橫豎線的效果。我們只需要在元素上同時設置border-bottom和border-right屬性即可。例如：

div {
border-bottom: 1px solid #ccc;
border-right: 1px solid #ccc;
height: 100px;
}

以上代碼將在div元素的底部和右側分別添加一條寬度為1像素、顏色為#ccc的橫豎線。