Мой Справочник | CSS3 | Радиальный градиент

radial-gradient()
Радиальный градиент Синтаксис: background-image: radial-gradient(цвет, цвет); Радиальный градиент начинается в центре элемента, считается по ширине и высоте	`background-image: radial-gradient(darkgreen, yellow);`
Формы радиального градиента
Формы радиального градиента \|ellipse\| - эллипс (по ум); \|circle\|* - круг; \|30% 40%\| - координаты центра; \|closest-side\| - предписывает браузеру создать градиент, распространяющийся из центра только до ближайшей к центру стороне элемента; \|closest-corner\| - приводит к вычислению ширины градиента из его центра до ближайшего угла элемента; \|farthest-side\| - приводит к вычислению радиуса окружности от ее середины до самой дальней стороны элемента; \|farthest-corner\| - приводит к вычислению радиуса окружности от ее центра до самого дальнего угла элемента;	`-moz-radial-gradient(30% 40%, circle, darkgreen 10%, yellow 30%); -moz-radial-gradient(30% 40%, circle closest-side, darkgreen, yellow); -moz-radial-gradient(30% 40%, circle closest-corner, darkgreen, yellow); -moz-radial-gradient(30% 40%, circle farthest-side, darkgreen, yellow); -moz-radial-gradient(30% 40%, circle farthest-corner, darkgreen, yellow);`
Многоцветный градиент Цвета перечисляются через запятую	`radial-gradient( black, brown, blue, green, red, yellow, white );`	По умолчанию все цвета равномерно распределяются по ширине, но этим можно управлять с помощью пропорций цвета
Пропорции цветов , % после цвета	`background-image: radial-gradient(green, yellow); radial-gradient(green 0%, yellow 100%); radial-gradient(green 30%, yellow 70%);`	1 По умолчанию пропорции распределены равномерно, если будут два цвета, то у первого будет 0%, у второго 100%, чтобы получился неразрывный градиент 2 Подтверждение верхнего примера 3 Здесь на шаге 0-30% ширины займёт зелёный цвет без искажений, а на 70-100% жёлтый, градиент будет на шаге 30-70%.
Колорстопы	`radial-gradient( black 0%, black 15%, brown 15%, brown 30%, blue 30%, blue 45%, green 45%, green 60%, red 60%, red 75%, yellow 75%, yellow 90%, white 90%, white 100% );`	Если указывать явный шаг для каждого цвета, чтобы конец одного цвета был началом другого, то самого градиента не будет, будут только эти цвета в чистом виде
Колорстопы в px	`radial-gradient( black 0px, black 15px, brown 15px, brown 30px, blue 30px, blue 45px, green 45px, green 60px, red 60px, red 75px, yellow 75px, yellow 90px, white 90px, white 100px );`	Можно записывать в пикселях, при этом будет фиксированное значение цвета и не будет зависимости от ширины блока, когда стоят. Цвет, который был указан последним занимает всё остальное свободное пространство
repeating-radial-gradient()
Повторяющийся радиальный градиент	`repeating-radial-gradient( black 0px, black 15px, brown 15px, brown 30px, blue 30px, blue 45px, green 45px, green 60px, red 60px, red 75px, yellow 75px, yellow 90px, white 90px, white 100px );`	При повторении градиента обычно задают пиксели для колор-стопов и одинаковые крайние цвета, чтобы не было резких переходов