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

Question

I want to make a line which should change its opacity along the line from one end to another using HTML or CSS or JS. The line should start with less opacity and should end with high opacity or vice versa.

or

The line should start and end with less opacity and should have high opacity in the middle of the line.

Answer 1

Essentially, what you need is a gradient line. Here's an example of such a 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);
}

You can read more about gradients here

Here's a JSFiddle example you can look at