我认为最简单的解释方法是简单地链接到我想要的示例:
在顶部有一个不会延伸很远的小蓝色渐变。
我想复制这个，但我知道如何在 CSS3 中做渐变的唯一方法是从页面的顶部到底部，而不是中途停止。我环顾四周，并没有真正找到任何东西，尽管我确实看到了颜色停止属性，但我不确定这是否是我要找的东西。
谁能帮帮我？
最佳答案
#test {
background: #1e5799; /* Old browsers */
background: -moz-linear-gradient(top, #1e5799 0%, #e2e2e2 10px); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#1e5799), color-stop(100px,#e2e2e2)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #1e5799 0%,#e2e2e2 100px); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #1e5799 0%,#e2e2e2 100px); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #1e5799 0%,#e2e2e2 100px); /* IE10+ */
background: linear-gradient(top, #1e5799 0%,#e2e2e2 100px); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1e5799', endColorstr='#e2e2e2',GradientType=0 ); /* IE6-9 */
}
我不知道该背景图像上使用的是什么蓝色和高度，但您可以轻松地将其插入到上面粘贴的代码中。演示:http://jsfiddle.net/xyn4f/
您还应该检查在线梯度生成器。我用了 that one生成代码。
关于css - 我如何使 "stop"渐变从页面向下流动？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/9982132/