backdrop-filter - позволяет применять к области за элементом графические эффекты, такие как

размытие или смещение цвета. Поскольку это применяется ко всему, что находится за элементом, чтобы
увидеть эффект, вы должны сделать элемент или его фон хотя бы частично прозрачными.
backdrop-filter: blur(2px)/brightness(60%)/contrast(40%)/drop-shadow(4px 4px 10px
blue)/grayscale(30%)/hue-rotate(120deg)/invert(70%)/opacity(20%)/sepia(90%)/
saturate(80%)
backface-visibility - определяет, должна ли быть видна задняя грань элемента при обращении к
пользователю. Задняя грань элемента является зеркальным отражением отображаемой передней грани.
Это свойство полезно при повороте элемента. Он позволяет выбрать, если пользователь должен видеть
заднюю грань или нет.
backface-visibility: visible|hidden|initial|inherit;
matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n) - Определение трехмерного преобразования с
использованием матрицы 4x4 из 16 значений.
translate3d(x,y,z) - перемещает элемент из текущей позиции (в соответствии с параметрами,
заданными для оси X , оси Y и оси Z).
translateX(x) - Определяет трехмерный перевод, используя только значение для оси X.
translateY(y) - Определяет трехмерный перевод, используя только значение для оси Y.
translateZ(z) - Определяет трехмерный перевод, используя только значение для оси Z.
scale3d(x,y,z) - Определяет преобразование трехмерного масштаба.
scaleX(x) - Определяет преобразование трехмерного масштаба, предоставляя значение для оси X.
scaleY(y) - Определяет преобразование трехмерного масштаба, предоставляя значение для оси Y.
scaleZ(z) - Определяет преобразование трехмерного масштаба, предоставляя значение для оси Z.
rotate3d(x,y,z,angle) - Определяет 3D вращение.
rotateX(angle) - Определение 3D вращения вдоль оси X.
rotateY(angle) - Определение 3D вращения вдоль оси Y.
rotateZ(angle) - Определение 3D вращения вдоль оси Z.
perspective(n) - Определение вида перспективы для 3D преобразованного элемента.
inherit - устанавливает значение свойства, примененное к выбранному элементу, таким же, как у его
родительского элемента. Фактически это «включает наследование».
initial - устанавливает значение свойства, примененное к выбранному элементу, равным начальному
значению этого свойства.
unset - сбрасывает свойство до его естественного значения, что означает, что если свойство наследуется
естественным образом, оно действует как inherit, в противном случае - как initial.

background: Сокращения
background: red (color) url(bg-graphic.png)(image) 50%(size) 10px 10px (position)
repeat-x (repeat) fixed (attachment);
background-attachment - задает, прокручивается ли фоновое изображение с остальной частью
страницы, или является фиксированным.
background-attachment: scroll|fixed|local|initial|inherit;
local - Фоновое изображение будет прокручиваться вместе с содержимым элемента.

background-blend-mode - определяет режим наложения каждого фонового слоя (цвет и / или

изображение).
background-blend-mode: normal|multiply|screen|overlay|darken|lighten|color-dodge|
saturation|color|luminosity|difference|hue|soft-light|hard-light|exclusion|color-burn;
normal - режим по умолчанию. Изображения накладываются одно на другое.
multiply - режим наложения для умножения. Фоны смешиваются. Полупрозрачность. Режим
затемнения.
screen - Установка режима наложения на экран. Почти прозрачное изображение. Режим осветления.
overlay - Устанавливает режим наложения на наложение. Режим контраста.
darken - Установка режима наложения для затемнения. Режим затемнения.
lighten - Установка режима наложения для осветления. Режим осветления.
color-dodge - Устанавливает режим смешивания в Color-Dodge. Режим осветления.
saturation - Установка режима наложения на насыщение. Компонентный режим.
color - Устанавливает режим наложения на цвет. Компонентный режим.
luminosity - Установка режима наложения на яркость. Компонентный режим.
difference - Режим сравнения.
hue - Компонентный режим.
soft-light - Режим контраста.
hard-light - Режим контраста.
exclusion - Режим сравнения.
color-burn - Режим затемнения.

background-clip - задает как фоновая заливка или фоновая картинка будет размещаться относительно
элемента: часть фона будет залазить под границу, фон не будет залазить под границу или фон будет
размещаться только над содержимым элемента (то есть padding отодвинет фон).
background-clip: border-box|padding-box|content-box|initial|inherit;
border-box - Значение по умолчанию. Фон залезет под границу.
padding-box - Фон расширяется до внутреннего края границы.
content-box - Фон расширяется до края окна содержимого. Фон будет только над содержимым.
text - текст (буквы) окрашиваются в фон. Фон обрезается. Не везде поддерживается.

background-color - задает цвет фона элемента. Фон элемента - это общий размер элемента, включая
отступы и границы (но не поля).
background-color: color|transparent|initial|inherit;

background-image - задает фоновую картинку элементу. По умолчанию картинка замостит своими

копиями весь блок, однако, это поведение можно отменить с помощью свойства background-repeat.
background-image: url|none|initial|inherit;

background-origin - указывает исходную позицию (область расположения фона) фонового

изображения.
background-origin: padding-box|border-box|content-box|initial|inherit;
padding-box - Значение по умолчанию. Фоновое изображение начинается с верхнего левого угла края
отступа.
border-box - Фоновое изображение начинается с верхнего левого угла границы.
content-box - Фоновое изображение начинается с верхнего левого угла содержимого.

background-position - задает местоположение фоновой картинки элемента. Местоположение можно

задавать с помощью любых единиц для размеров. Первое значение обозначает отступ слева, второе -
отступ сверху. Можно также задавать положение ключевыми словами. В этом случае порядок значений не
важен. Ключевые слова для вертикали: top, center, bottom. Ключевые слова по горизонтали: left, center, right.
background-position: value;

background-repeat - задает каким образом повторять фоновую картинку элемента. По умолчанию

картинка повторяется и по оси X, и по оси Y, таким образом покрывая собой всю доступную область.
background-repeat: repeat|repeat-x|repeat-y|no-repeat|initial|inherit|space|round;
space - Картинка повторится столько раз, чтобы полностью заполнить область, если это не удается, между
картинками добавляется пустое пространство.
round - Картинка повторится так, чтобы в области поместилось целое число рисунков, если это не удается
сделать, то фоновые рисунки масштабируются.

background-size - задает размер картинки фона. Значением свойства служат любые единицы для
размеров, либо ключевые слова auto, cover или contain.
background-size: auto|length|cover|contain|initial|inherit;
cover - Масштабирует картинку так, чтобы она накрыла собой весь блок с сохранением пропорций.
Картинка будет стараться поместиться целиком, но это не всегда будет получаться, поэтому какая-то ее
часть будет обрезаться. Блок всегда будет покрыт картинкой целиком.
contain - Масштабирует картинку так, чтобы она целиком влезла в блок с сохранением пропорций. При
этом она может занять или всю ширину, или всю высоту (зависит от пропорций картинки и от размеров
элемента). Блок в общем случае будет покрыт картинкой не целиком (зато картинка всегда будет видна вся,
хоть и в уменьшенном варианте).

block-size - определяет горизонтальный или вертикальный размер блока элемента в зависимости от его
режима записи. Изменяет размер контейнера в зависимости от writing-mode(horizontal-tb/vertical-rl).
Если запись вертикально идет то изменяет высоту блока, если горизонтально то ширину.
block-size: px|em|%|max-content|min-content|fit-content|auto

border - задает цвет, тип и толщину границы для всех сторон одновременно. Является свойством-
сокращением для border-width, border-style и border-color. В отличие от сокращаемых свойств не может
задавать разную границу для 4-х сторон сразу, а только одинаковую для всех. Сокращения
border: border-width border-style border-color|initial|inherit;

border-collapse - устанавливает, должны ли границы таблицы сворачиваться в одну границу или

разделяться как в стандартном HTML.
border-collapse: separate|collapse|initial|inherit;
separate - границы разделены; Каждая ячейка будет отображать свои собственные границы. Это
значение по умолчанию.
collapse - границы свернуты в одну границу, когда это возможно (граница-пробелы и пустые-ячейки
свойства не имеют эффекта).

border-block - может использоваться для установки значений для одного или нескольких из border-
block-width, border-block-style и border-block-color одновременной установки как начала, так и конца
измерения блока. Физические границы, которым он сопоставляется, зависят от режима письма элемента,
направленности и ориентации текста. Это соответствует border-top и border-bottom или border-right, и
border-left свойства в зависимости от значений , определенных для writing-mode, direction и text-
orientation.
border-block: width style color;

border-block-end - может быть использован для установки значения для одного или более из border-
block-end-width, border-block-end-style, и border-block-end-color. Физическая граница, на которую он
отображается, зависит от режима письма элемента, его направленности и ориентации текста. Логический
border-bottom.
border-block-end: width style color;

border-block-end-color - определяет цвет границы логического конца блока элемента.

border-block-end-style - определяет стиль границы логического конца блока элемента.
border-block-end-width - определяет ширину границы логического конца блока элемента.
border-block-start - может быть использован для установки значения для одного или более из border-
block-start-width, border-block-start-style, и border-block-start-color. Физическая граница, на которую он
отображается, зависит от режима письма элемента, его направленности и ориентации текста. Логический
border-top.
border-block-start: width style color;

border-block-start-color - определяет цвет границы логического конца блока элемента.

border-block-start-style - определяет стиль границы логического конца блока элемента.
border-block-start-width - определяет ширину границы логического конца блока элемента.
border-block-style - определяет стиль границ логических блоков элемента.
border-block-width - определяет ширину границ логических блоков элемента.
border-bottom - задает все свойства нижней границы в одном объявлении. Сокращения
border-bottom: border-width border-style border-color|initial|inherit;

border-bottom-color - устанавливает цвет нижней границы элемента.

border-bottom-color: color|transparent|initial|inherit;

border-bottom-left-radius - округляет нижний левый угол элемента, задавая радиус.Если задано два
значения, первая для нижней границы, а вторая для левой границы. Если второе значение опущено, оно
копируется из первого. Если любая из длин равна нулю, то угол равен квадрату, а не округляется.
border-bottom-left-radius: length|% [length|%]|initial|inherit;

border-bottom-right-radius - округляет нижний правый угол элемента, задавая радиус.Если задано

два значения, первая для нижней границы, а вторая для правой границы. Если второе значение опущено,
оно копируется из первого. Если любая из длин равна нулю, то угол равен квадрату, а не округляется.
border-bottom-right-radius: length|% [length|%]|initial|inherit;

border-bottom-style - устанавливает стиль нижней границы элемента.

border-bottom-style:none|hidden|dotted|dashed|solid|double|groove|ridge|inset|outset|initial|
inherit;

border-bottom-width - устанавливает ширину нижней границы элемента.

border-bottom-width: medium|thin|thick|length|initial|inherit;

border-collapse - устанавливает должны ли границы таблицы сворачиваться в одну границу или

разделяться как в стандартном HTML.
border-collapse: separate|collapse|initial|inherit;

border-color - задает цвет четырех границ элемента. Это свойство может иметь от одного до четырех
значений.
border-color: color|transparent|initial|inherit;

border-end-end-radius - может быть использован для установки радиуса физической границы.

Физическая граница, на которую он отображается, зависит от режима письма элемента, его направленности
и ориентации текста. Логический border-bottom. Поддержка только FireFox.

border-end-start-radius - может быть использован для установки радиуса физической границы.

Физическая граница, на которую он отображается, зависит от режима письма элемента, его направленности
и ориентации текста. Логический border-top. Поддержка только FireFox.

border-image - задает картинку для границы, оно является свойством сокращением для свойств border-
image-source, border-image-slice, border-image-repeat, border-image-width и border-image-outset.
border-image: source slice width outset repeat|initial|inherit;
border-image-outset - позволяет отодвинуть рамку за пределы элемента. В качестве значения
указывается число без указания единиц измерения либо любые единицы для размеров, кроме процентов.
Если указано число без единиц, то оно является множителем, на который умножается значения свойства
border-width.
border-image-outset: length|number|initial|inherit;

border-image-repeat - указывает, должно ли изображение повторяться, округляться или растягиваться.

border-image-repeat: stretch|repeat|round|initial|inherit;
stretch - Значение по умолчанию. Изображение растягивается, чтобы заполнить область.
repeat - Изображение мозаично (повторяется) для заполнения области.
round - Изображение мозаично (повторяется) для заполнения области. Если он не заполняет область
целым числом плиток, изображение масштабируется так, чтобы оно соответствовало.
space - Изображение мозаично (повторяется) для заполнения области. Если он не заполняет область с
целым числом плиток, то дополнительное пространство распределяется вокруг плитки.

border-image-slice - указывает браузеру, какие части картинки пойдут на уголки, а какие на стороны (а
какая часть будет центральной). На уголки идут 4 части, на стороны идут 4 части и одна часть (центральная)
идет на фон элемента (опционально, ключевое слово fill).
border-image-slice: number|%|fill|initial|inherit;
fill - Приводит к отображению средней части изображения. По умолчанию центральная часть
изображения будет отброшена.

border-image-source - указывает путь к изображению, используемому в качестве границы.

border-image-source: url(путь к картинке);

border-image-width - задает ширину изображения границы.

border-image-width: number|%|auto|initial|inherit;

border-inline - сокращенное свойство для установки отдельных логических значений свойств встроенных
границ. Физические границы, которым border-inline сопоставляются, зависят от режима письма элемента,
направленности и ориентации текста. Логический border-left / border-right

border-inline-color - определяет цвет логических встроенных границ элемента, который

сопоставляется с цветом физической границы в зависимости от режима письма элемента, направленности и
ориентации текста.

border-inline-style - определяет стиль логических встроенных границ элемента, который

сопоставляется с цветом физической границы в зависимости от режима письма элемента, направленности и
ориентации текста.

border-inline-width - определяет ширину логических встроенных границ элемента, который

сопоставляется с цветом физической границы в зависимости от режима письма элемента, направленности и
ориентации текста.

border-inline-end - сокращенное свойство для установки значений отдельных логических значений

свойств конца встроенной границы. Логический border-right

border-inline-end-color - определяет цвет логического конца встроенной границы.

border-inline-end-style - определяет стиль логического конца встроенной границы.
border-inline-end-width - определяет ширину логического конца встроенной границы.
border-inline-start - сокращенное свойство для установки значений отдельных логических значений
свойств начала встроенной границы. Логический border-left

border-inline-start-color - определяет цвет логического начала встроенной границы.

border-inline-start-style - определяет стиль логического начала встроенной границы.
border-inline-start-width - определяет ширину логического начала встроенной границы.
border-left - задает все свойства левой границы в одном объявлении.
border-left: border-width border-style border-color|initial|inherit;

border-left-color - задает цвет левой границы элемента.

border-left-style - задает стиль левой границы элемента.
border-left-width - задает ширину левой границы элемента.
border-radius - определяет радиус углов элемента.
border-radius: 1-4 length|% / 1-4 length|%|initial|inherit;

border-right - задает все свойства правой границы в одном объявлении.

border-right: border-width border-style border-color|initial|inherit;

border-right-color - задает цвет правой границы элемента.

border-right-style - задает стиль правой границы элемента.
border-right-width - задает ширину правой границы элемента.
border-spacing - задает расстояние между границами соседних ячеек.
border-spacing: length|initial|inherit;

border-start-end-radius - может быть использован для установки радиуса физической границы.

Физическая граница, на которую он отображается, зависит от режима письма элемента, его направленности
и ориентации текста. Логический border-left. Поддержка только FireFox.

border-start-start-radius - может быть использован для установки радиуса физической границы.

Физическая граница, на которую он отображается, зависит от режима письма элемента, его направленности
и ориентации текста. Логический border-right. Поддержка только FireFox.

border-style - задает стиль четырех границ элемента. Это свойство может иметь от одного до четырех
значений.
border-style: none|hidden|dotted|dashed|solid|double|groove|ridge|inset|outset|initial|inherit;
groove - Задание трехмерной границы с канавкой.
ridge - Задание трехмерной границы с хребтом.

border-top - задает все свойства верхней границы в одном объявлении. Сокращения

border-top: border-width border-style border-color|initial|inherit;

border-top-color - устанавливает цвет верхней границы элемента.

border-top-color: color|transparent|initial|inherit;

border-top-left-radius - округляет верхний левый угол элемента, задавая радиус.Если задано два
значения, первая для верхней границы, а вторая для левой границы. Если второе значение опущено, оно
копируется из первого. Если любая из длин равна нулю, то угол равен квадрату, а не округляется.
border-top-left-radius: length|% [length|%]|initial|inherit;

border-top-right-radius - округляет верхний правый угол элемента, задавая радиус.Если задано два
значения, первая для верхней границы, а вторая для правой границы. Если второе значение опущено, оно
копируется из первого. Если любая из длин равна нулю, то угол равен квадрату, а не округляется.
border-top-right-radius: length|% [length|%]|initial|inherit;
border-top-style - устанавливает стиль верхней границы элемента.
border-top-style:none|hidden|dotted|dashed|solid|double|groove|ridge|inset|outset|initial|
inherit

border-top-width - устанавливает ширину верхней границы элемента.

border-bottom-width: medium|thin|thick|length|initial|inherit;

border-width - задает ширину четырех границ элемента. Это свойство может иметь от одного до
четырех значений.
border-width: medium|thin|thick|length|initial|inherit;

bottom - участвует в установке вертикального положения позиционируемого элемента . Он не влияет на

непозиционированные элементы.
bottom: auto|length|initial|inherit;

box-decoration-break - указывает, как фон, отступ, граница, граница-изображение, прямоугольник-

тень, поле и клип-путь элемента применяется, когда поле для элемента фрагментирован.(Разбит на части)
box-decoration-break: slice|clone|initial|inherit|unset; slice(по умолчанию)

box-shadow - присоединяет одну или несколько теней к элементу.

box-shadow: none|h-offset v-offset blur spread color |inset|initial|inherit;
h-offset - смещение по горизонтали.
v-offset - смещение по вертикали.
blur - радиус размытия тени.
spread - размер поворота тени. (размер тени)

box-sizing - определяет, как вычисляется ширина и высота элемента: должны ли они включать отступы и
границы, или нет.
box-sizing: content-box|border-box|initial|inherit;
content-box - учитывается только контент.
border-box - учитывается padding и border.

break-after - определяет, каким должен быть разрыв (страницы, колонки) после сформированных
блоков.
break-after: auto|always|avoid|all|initial|inherit|left|right|page|column|avoid-page|avoid-column;
auto - Вставляет разрыв (страницы, колонки) после блока.
avoid - Запрещает разрыв после блока.
always/all - Вставляет разрыв любого типа.

break-before - определяет, каким должен быть разрыв (страницы, колонки) до сформированных блоков.
break-before: auto|always|avoid|all|initial|inherit|left|right|page|column|avoid-page|avoid-column;

break-inside - определяет, каким должен быть разрыв (страницы, колонки) внутри сформированного
блока. Свойство игнорируется, если блок не указан.
break-inside: auto|always|avoid|all|initial|inherit|left|right|page|column|avoid-page|avoid-column;