模糊的线性渐变背景到纯色 Css

Question

我想在 div 中设置一个左灰线背景以显示这是一个线程......就像在 twitter 中一样。

我几乎明白了，但这条线看起来很模糊。我如何使它坚固？

.thread {
  height: 100px;
  width: 400px;
  border: 1px solid red;
}

.thread {
  background: linear-gradient(to right, 
      transparent 0%, 
      transparent calc(25px - 2px), 
      #E9EBEE calc(25px - 2px), 
      #E9EBEE calc(25px + 2px), 
      transparent calc(25px + 2px), 
      transparent 100%);
}

<div class="thread"></div>

Answer 1

改为这样做：

.thread {
  height: 100px;
  width: 400px;
  border: 1px solid red;
}

.thread {
  background:linear-gradient(#E9EBEE,#E9EBEE) 25px 0/4px 100% no-repeat;
  /* OR
  background-image:linear-gradient(#E9EBEE,#E9EBEE);
  background-size:4px 100%;
  background-position:25px 0;
  background-repeat:no-repeat;
  */
}

<div class="thread"></div>