css中的hr怎么竖向

CSS中的<hr>标签是分隔线标签，它可以用来在页面中分隔内容，常用于文章分割和节奏感的营造。默认情况下<hr>标签是水平的，但我们可以通过CSS来将它变成竖直的。

我们可以通过给<hr>标签设置transform: rotate(90deg);来使它竖直显示。这会让<hr>标签顺时针旋转90度，变成竖直状态，并且默认的宽度会变成高度。同时我们也需要重新设置height和width属性，以便让它们保持一致。

在以下的代码段中，我们可以看到如何实现竖直的<hr>标签：

hr.vertical {
   transform: rotate(90deg);
   height: 100px;
   width: 1px;
   border: none;
   background: black;
} 

在上面的代码中，我们首先定义了一个名为vertical的类名，并设置了它的transform属性来使它变成竖直状态。接下来，我们重新设置了height和width属性，让它们保持一致。最后我们还设置了border: none;和background: black;，以便让竖直的<hr>标签看起来更加美观。

使用以上的代码，我们可以轻松创建一条竖直的<hr>标签，用于页面分割或者其他需要竖直分隔的场合。