CSS中的hr元素默認(rèn)是水平的，但有時(shí)候我們需要將其設(shè)置為垂直方向，怎么讓CSS的hr元素垂直呢？

1、使用transform屬性：

CSS的transform屬性可以旋轉(zhuǎn)元素，我們可以使用transform屬性將hr元素旋轉(zhuǎn)90度，從而將其變?yōu)榇怪狈较颉?/p>

hr {
  transform: rotate(90deg);
}

2、使用writing-mode屬性：

CSS的writing-mode屬性可以指定文本和元素的排列方式，我們可以使用writing-mode屬性將hr元素的排列方式設(shè)置為垂直。

hr {
  writing-mode: vertical-rl;
}

3、使用height和width屬性：

為了讓hr元素在垂直方向上更加美觀，我們可以使用height和width屬性來設(shè)置其尺寸。

hr {
  height: 100px;
  width: 5px;
}

4、使用border屬性：

我們還可以使用border屬性來設(shè)置hr元素的邊框，從而使其更加醒目。

hr {
  border: 1px solid black;
}

通過以上方法，我們可以輕松地讓CSS的hr元素垂直，并且設(shè)置其尺寸、邊框等樣式，從而使其更加美觀和實(shí)用。