css - 如何在两端创建具有相同CSS梯度的直线？

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

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

background-image: -webkit-linear-gradient(left, transparent, #8C8C8C),
                  -webkit-linear-gradient(right, transparent, #8C8C8C);

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

最佳答案

您应该只使用以下片段中的单个渐变，并且起点和终点为透明。

说明：


transparent 0%表示渐变以透明色开始
#8C8C8C 15%表示渐变的颜色在0％到15％之间从透明逐渐变为#8C8C8C。
#8C8C8C 85%表示渐变的颜色从15％到85％保持为#8C8C8C。
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>