平滑的CSS渐变

我在学习如何使用CSS渐变。平滑的CSS渐变

我的问题是从上到下渐变。你可以在看到的“停止”在颜色变化。

enter image description here

这是我的CSS代码

#header { 
    width:1000px; 
    height:250px; 
    background:-moz-linear-gradient(top, #BF7A30 30%, #EDD599); 
    background:-webkit-linear-gradient(top, #BF7A30 30%, #EDD599); 
}

有没有一种方法来消除在顶部解数，底部梯度？（在我眼中，从左到右或从右到左渐变不是很明显）

来源

2012-10-31 Isuru

Think的下面的css将满足您的需求。

CSS：

#header { 
    width:1000px; 
    height:250px; 
    /* IE10 Consumer Preview */ 
background-image: -ms-linear-gradient(bottom, #EDD799 0%, #BF7F37 100%); 
    /* Mozilla Firefox */ 
background-image: -moz-linear-gradient(bottom, #EDD799 0%, #BF7F37 100%); 
    /* Opera */ 
background-image: -o-linear-gradient(bottom, #EDD799 0%, #BF7F37 100%); 
    /* Webkit (Safari/Chrome 10) */ 
background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, #EDD799), color-stop(1, #BF7F37)); 
    /* Webkit (Chrome 11+) */ 
background-image: -webkit-linear-gradient(bottom, #EDD799 0%, #BF7F37 100%); 
    /* W3C Markup, IE10 Release Preview */ 
background-image: linear-gradient(to top, #EDD799 0%, #BF7F37 100%); 
}

http://jsfiddle.net/xPLPH/

了解更多关于线性渐变： https://developer.mozilla.org/en-US/docs/CSS/linear-gradient

来源

2012-10-31 04:54:11

这样做。谢谢。 :) – Isuru

这不是可见颜色停止命名问题的解决方案。您只是建议不要在渐变之间使用色块，并将它们移动到边缘：首先为0％，最后为100％。你可以看到这个，如果你移动颜色停止就像问题的作者代码：http://jsfiddle.net/zoaporx0/1/ –

不是一个答案。边缘仍然可见。 –