Question

我有这样一条线，我想做这样的事情，但找不到如何做。我是否应该一个接一个地使用两行来达到这种效果，还是可以另一种方式来实现？我也在查看linear-gradient，但没有得到相同的结果。还是必须在边缘具有不同的不透明度？

Answer 1

codepen链接https://codepen.io/dgknca/pen/KbwxRp

body {
  background:#262626;
  display:flex;
  justify-content:center;
}

.line {
  width:1px;
  height:400px;
  background-image: linear-gradient(to bottom, #262626, #a0a0a0, #262626);
  filter:blur(.8px);
  margin-top:50px;
}

<div class="line"></div>

Answer 2

我认为您可以通过为空的div对象提供linear-gradient背景的CSS背景图片来实现这一目标。

代码可能类似于以下代码段：

.two_colored_line {
width: 100%;
height: 5px;
background-image: linear-gradient(to right, red, yellow, red);
}

<div class='two_colored_line'></div>

您可以在此处找到更多信息：CSS Linear Gradients

Answer 3

这是您的一个选择...这是一个简单的线条渐变。

#line-parent {
  width: 50px;
  height: 100vh;
  background-color: black;
  margin: 0 auto;
}

#line {
  height: 98vh;
  width: 3px;
  border: 3px solid black;
  background-color: black;
  margin: 0 auto;
  background-image: linear-gradient(black, grey, black);
}

<div id="line-parent">
  <div id="line"></div>
</div>

Answer 4

这就是您可以使用渐变进行此操作的方式。

.line{height:200px; width:2px; margin:auto; background: linear-gradient(to bottom,#0000001c,#000,#0000001a);}

<div class="line"></div>

用两种不同的颜色制作一条线，一种在中心，另一种在边缘

4 个答案: