CSS兩豎的設(shè)置方法

在CSS中，我們可以使用偽元素（::before和::after）或者邊框（border）來創(chuàng)建兩個(gè)豎直的線條。

方法一：使用偽元素

我們可以通過在元素上添加偽元素來創(chuàng)建兩個(gè)豎直的線條，我們可以給元素添加::before和::after偽元素，并設(shè)置它們的寬度和顏色。

.element {
  position: relative;
  height: 200px;
}
.element::before, .element::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  width: 2px;
  height: 200px;
  background-color: #000;
}
.element::before {
  left: 0;
}
.element::after {
  right: 0;
}

方法二：使用邊框

我們也可以通過設(shè)置元素的邊框來創(chuàng)建兩個(gè)豎直的線條，我們可以給元素添加左右兩個(gè)邊框，并設(shè)置它們的寬度和顏色。

.element {
  height: 200px;
  border-left: 2px solid #000;
  border-right: 2px solid #000;
}

示例代碼

以下是兩個(gè)示例代碼，分別展示了如何使用偽元素和邊框來創(chuàng)建兩個(gè)豎直的線條：

使用偽元素：

<div class="element"></div>

.element {
  position: relative;
  height: 200px;
}
.element::before, .element::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  width: 2px;
  height: 200px;
  background-color: #000;
}
.element::before {
  left: 0;
}
.element::after {
  right: 0;
}

使用邊框：

<div class="element"></div>

.element {
  height: 200px;
  border-left: 2px solid #000;
  border-right: 2px solid #000;
}