如何在两端创建具有相同css渐变的直线？

Question

如何仅使用CSS创建下面的图像？

我试图在两端绘制一条透明渐变的线 - 这是我尝试过的不起作用的地方：

mapToSubclass1

因此，在线的左右两端，渐变向内移动。

Answer 1

您应该只使用下面代码段中的单个渐变，其开头和结尾都是透明的。

<强>解释

• transparent 0%表示渐变以透明色开始
• #8C8C8C 15%表示在0％到15％之间，渐变的颜色会逐渐从透明变为#8C8C8C。
• #8C8C8C 85%表示渐变的颜色从#8C8C8C保持在15％到85％之间。
• transparent 100%表示渐变的颜色会再次从#8C8C8C逐渐变为透明度，介于85％ - 100％之间。

颜色停止会产生幻觉，就像渐变从任一方向向内进行一样。相等的分割使得两侧的变化看起来相同。

div {
  background-image: -webkit-linear-gradient(left, transparent 0%, #8C8C8C 15%, #8C8C8C 85%, transparent 100%);
  background-image: linear-gradient(left, transparent 0%, #8C8C8C 15%, #8C8C8C 85%, transparent 100%);
  height: 2px;
}

<div></div>

Answer 2

各种颜色停止值可以帮助实现这种效果。

将白色停留在10％并将透明和灰色（增加）的混合物延长至50％，然后将灰色和透明（增加）的混合物延长至100％。

.gradient {
  width: 600px;
  height: 1px;
  background: linear-gradient(to right, transparent 10%, gray 50%, transparent 100%);
}

<div class="gradient"></div>

此外，您可以使用%值来获得精确的渐变。例如，通过增加下面的停止点，可以使您的图像尽可能准确。

.gradient {
  width: 600px;
  height: 1px;
  background: linear-gradient(to right, transparent 10%, gray 20%, gray 90%, transparent 98%, transparent 100%);
}

<div class="gradient"></div>