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

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你可以看看