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

问题描述：

#navigation { 
    border: 1px solid #888888; 
    border-radius: 22px; 
    -moz-border-radius: 22px; 
    -webkit-border-radius: 22px;  
    height: 50px; 
    font-family: Arial;  
    background: #AAAAAA; 
    background: -webkit-gradient(linear, 0 0, 0 bottom, from(#AAAAAA), to(#757575)); 
    background: -webkit-linear-gradient(#AAAAAA, #757575); 
    background: -moz-linear-gradient(#AAAAAA, #757575); 
    background: -ms-linear-gradient(#AAAAAA, #757575); 
    background: -o-linear-gradient(#AAAAAA, #757575); 
    background: linear-gradient(#AAAAAA, #757575); 
    -pie-background: linear-gradient(#AAAAAA, #757575); 
    behavior: url(/Public/stylesheets/PIE.htc); 
}

这个结果：

http://dss.com.bo/inicio.aspx

这是我在使用CSS3重新创建一个梯度尝试也使用CSS3PIE enter image description here

如何减少出血效果，所以颜色过渡更难？

http://jsbin.com/isozod/edit#javascript,html,live – 2012-01-09 18:48:13

为什么不把它作为一个答案？ – 2012-01-09 18:50:19

@roXon：该jsbin链接可以工作，但会中断PIE功能并且不再显示渐变边框半径。任何想法为什么它不工作？ – 2012-01-09 19:01:41

答

在不透明度上有一个白色的渐变色，在所需的背景色中高达50％。此方法可以用于任何背景颜色而无需更改渐变CSS。

演示：http://jsfiddle.net/ThinkingStiff/Zn5Qb/

CSS：

#header { 
    background-color: #595454; 
    background-image: linear-gradient( 
      top, 
      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%); 
     background-image: -webkit-linear-gradient( 
      top, 
      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%); 
     background-image: -moz-linear-gradient( 
      top, 
      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%); 
     background-image: -o-linear-gradient( 
      top, 
      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%); 
     background-image: -ms-linear-gradient( 
      top, 
      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%); 
    height: 42px; 
    width: 100%; 
}

HTML：

<div id="header"></div>

输出：

enter image description here

答

它守ld工作。

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

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

相关推荐