html - 如何在页面的左上角和右上角使用 CSS 渐变？

Question

我正在尝试弄清楚如何使用它:
http://www.colorzilla.com/gradient-editor/

并在我页面的左上角和右上角使用一个。

如有任何帮助，我们将不胜感激。

Answer 1

你可以这样做like this (我删除了一些额外的代码，最好在 Chrome 中查看)，使用 2 个包装器并对每个包装器应用渐变(前提是每个包装器最终都是透明的，以允许另一个包装器显示出来)。

我用来生成这个的渐变代码是:

#wrapper {
    width:100%;
    height:500px;
    background: -webkit-radial-gradient(top left, ellipse cover, rgba(255,0,0,1) 0%,rgba(255,0,0,0) 50%);
    border:solid 1px red;
}

#inner {
    width:100%;
    height:500px;
    background: -webkit-radial-gradient(top right, ellipse cover, rgba(0,0,255,1) 0%,rgba(0,0,255,0) 50%);
    border:solid 1px blue;
}

这是我的演示结果:

或者，您可以使用 Colorzilla editor 将两个渐变合并为一个。 , 使用多个色标。