如何在CSS3线性渐变中使渐变停止？

请参见本示例页面中的灰色条：

以下是我使用CSS3重新创建渐变的尝试-同时使用：

这导致：

---

如何减少出血效果，使颜色过渡更加困难？

在您所需的背景色上，白色渐变褪色的不透明度高达50%。此方法可用于任何背景颜色，而无需更改渐变CSS

演示：

CSS:

#头{
背景色：#595454；
背景图像：线性渐变（
顶部
rgba（255，255，255，.4）0%，
rgba（255，255，255，.1）50%，
rgba（255，255，255，.0）50.5%，
rgba（255,255,255,0）100%；
背景图片：-webkit线性渐变（
顶部
rgba（255，255，255，.4）0%，
rgba（255，255，255，.1）50%，
rgba（255，255，255，.0）50.5%，
rgba（255,255,255,0）100%；
背景图像：-moz线性梯度（
顶部
rgba（255，255，255，.4）0%，
rgba（255，255，255，.1）50%，
rgba（255，255，255，.0）50.5%，
rgba（255,255,255,0）100%；
背景图像：-o-线性-梯度（
顶部
rgba（255，255，255，.4）0%，
rgba（255，255，255，.1）50%，
rgba（255，255，255，.0）50.5%，
rgba（255,255,255,0）100%；
背景图像：-ms线性梯度（
顶部
rgba（255，255，255，.4）0%，
rgba（255，255，255，.1）50%，
rgba（255，255，255，.0）50.5%，
rgba（255,255,255,0）100%；
高度：42px；
宽度：100%；
}

HTML:

输出：

它应该能工作

#menu-bg {
  border: 1px solid #888888;
  border-radius: 22px;
  -moz-border-radius: 22px;
  -webkit-border-radius: 22px;    
  height: 50px;
  font-family: Arial; 
  background: #868686; /* Old browsers */
  background: -moz-linear-gradient(top,  #868686 0%, #727272 49%, #5e5e5e 51%, #747474 100%); /* FF3.6+ */
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#868686), color-stop(49%,#727272), color-stop(51%,#5e5e5e), color-stop(100%,#747474)); /* Chrome,Safari4+ */
  background: -webkit-linear-gradient(top,  #868686 0%,#727272 49%,#5e5e5e 51%,#747474 100%); /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(top,  #868686 0%,#727272 49%,#5e5e5e 51%,#747474 100%); /* Opera 11.10+ */
  background: -ms-linear-gradient(top,  #868686 0%,#727272 49%,#5e5e5e 51%,#747474 100%); /* IE10+ */
  background: linear-gradient(top,  #868686 0%,#727272 49%,#5e5e5e 51%,#747474 100%); /* W3C */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#868686', endColorstr='#747474',GradientType=0 ); /* IE6-9 */
}

    <div id="menu-bg"></div>

#菜单背景{
边框：1px实心#8888888；
边界半径：22px；
-moz边界半径：22px；
-webkit边界半径：22px；
高度：50px；
字体系列：Arial；
背景：#868686；/*旧浏览器*/
背景：-莫兹线性梯度（顶部，#868686 0%，#7272 49%，#5E5E 51%，#747474 100%）；/*FF3.6+*/
背景：-webkit渐变（线性、左上、左下、颜色停止（0%、#868686）、颜色停止（49%、#727272）、颜色停止（51%、#5E5E）、颜色停止（100%、#747474））；/*铬、Safari4+*/
背景：-webkit线性梯度（顶部，#868686 0%，#7272 49%，#5E5E 51%，#747474 100%）；/*Chrome10+，Safari5.1+*/
背景：-o-线性梯度（顶部，#868686 0%，#7272 49%，#5E5E 51%，#747474 100%）；/*Opera 11.10+*/
背景：-ms线性梯度（顶部，#868686 0%，#7272 49%，#5E5E 51%，#747474 100%）；/*IE10+*/
背景：线性梯度（顶部，#868686 0%，#7272 49%，#5E5E 51%，#747474 100%）；/*W3C*/
过滤器：progid:DXImageTransform.Microsoft.gradient（startColorstr='#868686'，endColorstr='#747474'，GradientType=0）；/*IE6-9*/
}

为什么不把它作为答案呢？@roXon:jsbin链接可以工作，但破坏了饼图功能，渐变边框半径不再出现。知道它为什么不起作用吗？

#menu-bg {
  border: 1px solid #888888;
  border-radius: 22px;
  -moz-border-radius: 22px;
  -webkit-border-radius: 22px;    
  height: 50px;
  font-family: Arial; 
  background: #868686; /* Old browsers */
  background: -moz-linear-gradient(top,  #868686 0%, #727272 49%, #5e5e5e 51%, #747474 100%); /* FF3.6+ */
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#868686), color-stop(49%,#727272), color-stop(51%,#5e5e5e), color-stop(100%,#747474)); /* Chrome,Safari4+ */
  background: -webkit-linear-gradient(top,  #868686 0%,#727272 49%,#5e5e5e 51%,#747474 100%); /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(top,  #868686 0%,#727272 49%,#5e5e5e 51%,#747474 100%); /* Opera 11.10+ */
  background: -ms-linear-gradient(top,  #868686 0%,#727272 49%,#5e5e5e 51%,#747474 100%); /* IE10+ */
  background: linear-gradient(top,  #868686 0%,#727272 49%,#5e5e5e 51%,#747474 100%); /* W3C */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#868686', endColorstr='#747474',GradientType=0 ); /* IE6-9 */
}

    <div id="menu-bg"></div>