如何使垂直線從線的頂部到底部改變不透明度

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);
}

您可以在此處閱讀有關漸變的更多信息

這是一個JSFiddle示例，您可以看一下