如何在两端创建具有相同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%意味着渐变的颜色保持#8C8C8C在15%到85%之间.
• transparent 100%意味着渐变的颜色将再次从#8C8C8C85%到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>