CSS-градиенты с небольшим содержанием: исправлена ​​проблема с Chrome

Question

Я задал вопрос Градиенты CSS с небольшим содержанием некоторое время назад

Я придумал возможное исправление http://jsfiddle.net/aruUS/2/

html, body { min-height: 100% }
body { 
    background: -moz-linear-gradient(top, blue, red 200px); 
    background: -webkit-gradient(linear, 0 0, 0 200px, from(blue), to(red));
}

работает только часть Firefox, кажется, webkit поддерживает только проценты для цветных остановок? Во всяком случае, чтобы сделать эту работу?

Answer 1

Просто удалите px из 200px.Значения пикселей в синтаксисе градиентов Webkit не имеют единиц измерения.Т.е.

background: -webkit-gradient(linear, 0 0, 0 200, from(blue), to(red));

См. Блог Surf 'Safari Представляем градиенты CSS :

Точка - это пара значений, разделенных пробелом.Синтаксис поддерживает числа, проценты или ключевые слова top, bottom, left и right для значений точек.

Числа не имеют единицы, в отличие от длины, что делает, согласно спецификации CSS .

Answer 2

попробуйте это:

-webkit-gradient(
    linear,
    left bottom,
    left top,
    color-stop(0.3, rgb(255,0,0)),
    color-stop(0.47, rgb(255,0,0)),
    color-stop(1, rgb(0,0,254))
);

Дополнительная информация для -webkit-gradient посещения: http://webkit.org/blog/175/introducing-css-gradients/

Живой пример: http://jsfiddle.net/aruUS/3/

Инструмент, который поможет вам больше:http://gradients.glrzad.com/