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

Question

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

我试图在两端画一条透明渐变的线 - 这是我试过的但不起作用:

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

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

Answer 1

你应该像下面的代码片段一样使用一个渐变，开始和结束都是透明的。

解释:

• 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>