Горизонтальные градиенты CSS?

Question

Я хочу иметь градиент в качестве фона моей веб-страницы. Я понял, как сделать градиент вертикальным, но хочу, чтобы он был горизонтальным.

background-image: -webkit-gradient(linear, 0% 25%, 0% 0%, from(rgb(176, 196, 222)), to(rgb(255, 255, 255)));
background-image: -moz-linear-gradient(center bottom, rgb(153, 255, 51) 25%, rgb(255, 102, 51) 80%);

Answer 1

Для -webkit-gradient вы определяете направление, используя две точки (2-й и 3-й аргументы в вашем случае), а для -moz-linear-gradient оно определяется только начальной точкой (первый аргумент).Поэтому, чтобы превратить эти градиенты в горизонтальные, вы должны сделать:

background-image: -webkit-gradient(linear, 25% 0%, 0% 0%, from(rgb(176, 196, 222)), to(rgb(255, 255, 255)));
background-image: -moz-linear-gradient(center right, rgb(153, 255, 51) 25%, rgb(255, 102, 51) 80%);

(Возможно, вам придется настроить значения цвета, потому что вы определяете точки по-разному для каждого браузера. Это может быть проще, если выустановите также значение center right, center left для Webkit, чтобы оно соответствовало Mozilla.)