Question

我认为最简单的解释方法就是链接到我想要的例子：

在顶部有一个小蓝色渐变，不会拉伸很远。

我想复制这个，但我知道如何在CSS3中做渐变的唯一方法是从页面的顶部到底部，而不是在中途停止。我环顾四周，找不到任何东西，虽然我确实看到了颜色停止属性，但我不确定这是不是我正在寻找的东西。

有人能帮我一把吗？

Answer 1

#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生成代码。

如何“阻止”渐变进一步向下流动？

1 个答案: