平滑的 CSS 渐变
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/13151331/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Smooth CSS gradients
提问by Isuru
I'm learning how to use CSS gradients.
我正在学习如何使用 CSS 渐变。
My problem is with top to bottom gradients. You can just seethe "stops" in the color changing.
我的问题是从上到下的渐变。您只能看到颜色变化中的“停止”。
This is my CSS code
这是我的 CSS 代码
#header {
width:1000px;
height:250px;
background:-moz-linear-gradient(top, #BF7A30 30%, #EDD599);
background:-webkit-linear-gradient(top, #BF7A30 30%, #EDD599);
}
Is there a way to smooth out the stops in top to bottom gradients? (this, to my eye, isn't very visible in left to right or right to left gradients)
有没有办法平滑从上到下渐变的停止？（在我看来，这在从左到右或从右到左的渐变中不是很明显）
采纳答案by Avin Varghese
Think's below css will suite your need.
认为下面的 css 将满足您的需求。
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%);
}
Learn more about Linear Gradients:https://developer.mozilla.org/en-US/docs/CSS/linear-gradient
了解有关线性渐变的更多信息：https : //developer.mozilla.org/en-US/docs/CSS/linear-gradient
回答by nighthawk2534
Check this out:
看一下这个：
background-color: #bf7a30;
background-image: linear-gradient(0deg, #bf7a30 0%, #edd599 46%, #bf7a30 100%);
I generated it real easy from www.gradientcss.com
我很容易从www.gradientcss.com生成它
