Question

以下是stackoverflow上另一个问题的链接。

我喜欢创造的线条。以下是我在网站上用于水平线的代码：

hr.fancy-line { 
    border: 0; 
    height: 5px;

}
hr.fancy-line:before {
    top: -0.5em;
    height: 1em;
}
hr.fancy-line:after {
    content:'';
    height: 0.5em;
    top: 1px;
}

hr.fancy-line:before, hr.fancy-line:after {
    content: '';
    position: absolute;
    width: 100%;
}

hr.fancy-line, hr.fancy-line:before {
    background: radial-gradient(ellipse at center, rgba(0,0,0,0.1) 0%,rgba(0,0,0,0) 75%);
}

body, hr.fancy-line:after {
    background: #f4f4f4;
}

-Some Text-
<hr class="fancy-line"></hr>

现在我想知道：如何修改此代码，以便我能够创建垂直线。以下是我使用上述代码创建水平线的链接：Horizontal lines used

Answer 1

我设计了宽度窄，高度高的元素。

但是，从<hr>中创建一条垂直线似乎是非语义的，因此您可能希望使用<span>或其他元素。

＆＃13;

body {
  background: #f4f4f4;
}
hr.fancy-line {
  border: 0;
  height: 180px;
  width: 5px;
  margin: 0 auto;
  background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.1) 0%, rgba(0, 0, 0, 0) 75%);
}

＆＃13;

<hr class="fancy-line"></hr>

＆＃13;

实现线条的方式取决于您使用它们的上下文。例如，如果行将分隔页面上的元素，您可能希望将它们创建为伪元素，如下所示：

＆＃13;

ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
ul li {
  position: relative;
  display: inline-block;
  width: 180px;
  height: 180px;
  background-color: #CCC;
}
ul li:not(:last-child) {
  margin: 0 1em 0 0;
}
ul li:not(:last-child):after {
  content: "";
  position: absolute;
  left: 100%;
  margin-left: .5em;
  height: 100%;
  width: 4px;
  background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.1) 0%, rgba(0, 0, 0, 0) 75%);
}

＆＃13;

<ul>
  <li></li>
  <li></li>
  <li></li>
</ul>

＆＃13;

Answer 2

您看到横线的原因是签证网络浏览器处理<hr>（水平标尺）元素的方式。这就是HTML规范定义这个元素的方式。

HTML中没有<vr>元素或等效元素，所以你必须为此完全不同的东西。

Answer 3

您可以像这样旋转hr 90度：

hr.fancy-line {
  transform: rotate(90deg);
}

hr.fancy-line { 
    border: 0; 
    height: 5px;

}
hr.fancy-line:before {
    top: -0.5em;
    height: 1em;
}
hr.fancy-line:after {
    content:'';
    height: 0.5em;
    top: 1px;
}

hr.fancy-line:before, hr.fancy-line:after {
    content: '';
    position: absolute;
    width: 100%;
}

hr.fancy-line, hr.fancy-line:before {
    background: radial-gradient(ellipse at center, rgba(0,0,0,0.1) 0%,rgba(0,0,0,0) 75%);
}

hr.fancy-line {
  transform: rotate(90deg);
}

body, hr.fancy-line:after {
    background: #f4f4f4;
}

-Some Text-
<hr class="fancy-line"></hr>

Answer 4

您可以为div创建一个左边框或右边框，围绕body中的所有内容（或将元素的height设置为100%）。< / p>

Answer 5

如果您想使hr垂直，您有三个选项。

如果您需要支持旧浏览器：

 hr {
    display: inline-block;
 }

如果您只需要支持新浏览器，请使用：

hr {
    transform: rotate(90deg);
 }

设置一个小宽度和大高度：

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

Answer 6

感谢@showdev和@Cayce K.

我现在有了我想要的东西。

让我把这些代码放在任何想要在将来做类似事情的人身上。

body {
  background: #f4f4f4;
}
hr.fancy-line {
  border: 0;
  margin: 0 auto;
  background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.1) 0%, rgba(0, 0, 0, 0) 75%);
}

<hr class="fancy-line" style="height: 100px; width: 5px;"></hr>

我已将高度和宽度移动到html行，因此我会在不同的页面上插入不同高度和宽度的垂直线。

感谢所有其他人的贡献。这实际上是我对stackoverflow的第一个问题。很高兴的回应。干杯

如何使用给定链接中的css代码创建垂直线？

6 个答案: