如何在CSS3線性漸變中使漸變停止？

請參見本例頁面的灰色條： - ：在如何在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

如何減少出血效果，所以顏色過渡更難？

來源

2012-01-09 Only Bolivian 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

來源

2012-01-09 18:48:42 ThinkingStiff

它守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>

來源

2012-01-09 18:58:27 NewUser

如何在CSS3線性漸變中使漸變停止？

回答

相關問題