По своему действию похож на радиальный градиент, который делается функцией radial-gradient(), и имеет с ним схожий синтаксис. Но цвета градиента бесконечно повторяются во всех направлениях образуя узор, заполняющий фон элемента.
Синтаксис
background-image: repeating-radial-gradient([ circle || <радиус> ] [ at <позиция> ]?, | [ ellipse || [<радиус> | <проценты> ]{2}] [ at <позиция> ]?, | [ [ circle | ellipse ] || <размер> ] [ at <позиция> ]?, | at <позиция>, <цвет> [, <цвет> ]*)Значения
Circle Радиальный градиент круглой формы.
Ellipse Создаёт градиент эллиптической формы. Эта форма установлена по умолчанию.
<радиус> Радиус градиента в доступных для CSS единицах. Одно значение указывает радиус круга, два значения — радиус эллипса по оси x и его же радиус по оси y. Если радиус явно не указан, градиент будет заполнять собой весь фон элемента.
<позиция> Задаёт начальную точку откуда исходит градиент. Позиция точки пишется аналогично значениям свойства background-position с помощью ключевых слов или доступных единиц измерения вроде пикселей или процентов; ниже приведены возможные сочетания.
· top left = left top = 0% 0% (в левом верхнем углу);
· top = top center = center top = 50% 0% (по центру вверху);
· right top = top right = 100% 0% (в правом верхнем углу);
· left = left center = center left = 0% 50% (по левому краю и по центру);
· center = center center = 50% 50% (по центру) — это значение по умолчанию;
· right = right center = center right = 100% 50% (по правому краю и по центру);
· bottom left = left bottom = 0% 100% (в левом нижнем углу);
· bottom = bottom center = center bottom = 50% 100% (по центру внизу);
· bottom right = right bottom = 100% 100% (в правом нижнем углу).
<цвет> Представляет собой значение цвета (см. цвет), за которым идёт необязательная позиция цвета относительно оси градиента, она задаётся в процентах от 0% до 100% или в любых других подходящих для CSS единицах.
<размер> Устанавливает размер градиента. В табл. 1 перечислены возможные значения размера с их описанием и результатом для белого и чёрного цвета. Код и вид дан для кругового и эллиптического градиента.
| Табл. 1. Ключевые слова для изменения размера градиента | |||
| Значение | Код | Описание | Вид |
| closest-side | background: radial-gradient(circle closest-side at 30px 20px, #fff, #000); background: radial-gradient(closest-side at 30px 20px, #fff, #000); | Градиент совпадает с ближайшей к нему стороной блока (для круга) или одновременно совпадает с ближайшими горизонтальными и вертикальными сторонами (для эллипса). | 
|
| closest-corner | background: radial-gradient(circle closest-corner at 30px 20px, #fff, #000); background: radial-gradient(closest-corner at 30px 20px, #fff, #000); | Форма градиента вычисляется на основании информации о расстоянии до ближайшего угла блока. | 
|
| farthest-side | background: radial-gradient(circle farthest-side at 30px 20px, #fff, #000); background: radial-gradient(farthest-side at 30px 20px, #fff, #000); | Похож по своему действию на closest-side, но градиент распространяется до дальней стороны блока. | 
|
| farthest-corner | background: radial-gradient(circle farthest-corner at 30px 20px, #fff, #000); background: radial-gradient(farthest-corner at 30px 20px, #fff, #000); | Форма градиента вычисляется на основании информации о расстоянии до дальнего угла блока, | 
|
Примечание
Chrome до версии 26, Safari до версии 6.1 и Android до версии 4.4 поддерживают -webkit-repeating-radial-gradient().
Opera до версии 12.10 поддерживает -o-repeating-radial-gradient().
Firefox до версии 16 поддерживает -moz-repeating-radial-gradient().
Все свойства с префиксами не используют ключевое слово at при задании положения отправной точки градиента.
Saturate()
Функция saturate() изменяет насыщенность цветов в изображении.
Синтаксис
filter: saturate(<значение>);Значения
Значение 0% или 0 полностью убирает насыщенность цветов в изображении, превращая его в чёрно-белое. Значение 100% или 1 оставляет изображение неизменным. Любые значения больше 100% или больше 1 делают цвета в изображении более насыщенными.
Отрицательное значение не допускается. Пустое значение воспринимается как 1.
<style>.saturate { -webkit-filter: saturate(1.5); filter: saturate(1.5); } </style>Примечание
Chrome до версии 53, Opera до версии 40 и Safari до версии 9.1 поддерживают свойство -webkit-filter.
Насыщенность цвета. Слева — оригинал, справа фотография с фильтром
Sepia()
Функция sepia() превращает изображение в сепию — так называется чёрно-белое изображение с коричневым оттенком. Сепия придаёт фотографиям старинный вид.
Синтаксис
filter: sepia(<значение>);Значения
Значение 0% или 0 оставляет изображение неизменным. Значение 100% или 1 полностью превращает изображение в сепию. Любые значения от 0% до 100% или от 0 до 1 линейно применяют эффект.
Отрицательное значение не допускается. Пустое значение воспринимается как 0.
<style>.sepia { -webkit-filter: sepia(80%); filter: sepia(80%); transition: 1s; }.sepia:hover { -webkit-filter: sepia(0); filter: sepia(0); } </style>Результат данного примера показан на рис. При наведении курсора мыши на фотографию, она плавно превращается в цветную.
Анимируемые свойства
Здесь перечислены свойства, которые могут быть анимированы с помощью свойств animation и transition. Иными словами, плавно в течение времени изменять своё значение.
Для остальных свойств анимация работать не будет.
- all
- background
- background-color
- background-position
- background-position-x
- background-position-y
- background-size
- border
- border-bottom
- border-bottom-color
- border-bottom-left-radius
- border-bottom-right-radius
- border-bottom-width
- border-color
- border-left
- border-left-color
- border-left-width
- border-radius
- border-right
- border-right-color
- border-right-width
- border-top
- border-top-color
- border-top-left-radius
- border-top-right-radius
- border-top-width
- border-width
- bottom
- box-shadow
- clip
- color
- column-count
- column-rule
- column-rule-color
- column-rule-width
- columns
- filter
- flex
- flex-basis
- flex-grow
- flex-shrink
- font
- font-size
- font-stretch
- font-weight
- height
- left
- letter-spacing
- line-height
- margin
- margin-bottom
- margin-left
- margin-right
- margin-top
- max-height
- max-width
- min-height
- min-width
- opacity
- order
- outline
- outline-color
- outline-offset
- outline-width
- padding
- padding-bottom
- padding-left
- padding-right
- padding-top
- perspective
- perspective-origin
- right
- text-decoration
- text-decoration-color
- text-indent
- text-shadow
- top
- transform
- transform-origin
- vertical-align
- visibility
- width
- word-spacing
- z-index