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

Question

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

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

＆＃13;

＆＃13;

.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%);
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 1

做这样的事情：

＆＃13;

＆＃13;

.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;
  */
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;