如何使垂直线从一个线的顶部到底部改变不透明度

Question

我想创建一条线，它应该使用HTML或CSS或JS从一端到另一端改变其不透明度。该线应以较低的不透明度开始，并应以高不透明度结束，反之亦然。

或

该行应以较低的不透明度开始和结束，并且应该在该行的中间具有高不透明度。

Answer 1

基本上，你需要的是一条渐变线。这是一个这样的CSS的例子：

hr.name-of-your-vertical-line {
  border : 0;
  height : (height)px; /*your own value to suit your content*/
  width : 1px;
  background-image: -webkit-linear-gradient(top, #color1, #color2, #color3);
  background-image: -moz-linear-gradient(top, #color1, #color2, #color3);
  background-image: -ms-linear-gradient(top, #color1, #color2, #color3);
  background-image: -o-linear-gradient(top, #color1, #color2, #color3);
  background-image: linear-gradient(top, #color1, #color2, #color3);
}

您可以阅读有关渐变here

的更多信息

Here's a JSFiddle example你可以看看