CSS
функции

Синтаксис

• <calc()> = calc( <calc-sum> )
• <calc-sum> = <calc-product> [ [ '+' | '-' ] <calc-product> ]*
• <calc-product> = <calc-value> [ '*' <calc-value> | '/' <number> ]*
• <calc-value> = <number> | <dimension> | <percentage> | ( <calc-sum> )

замечания

функция calc ()

Принимает математическое выражение и возвращает числовое значение.

Это особенно полезно при работе с различными типами единиц (например, вычитание значения px из процента) для вычисления значения атрибута.

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

Используйте calc() для вычисления ширины элемента div:

#div1 {
    position: absolute; 
    left: 50px;
    width: calc(100% - 100px); 
    border: 1px solid black; 
    background-color: yellow; 
    padding: 5px; 
    text-align: center; 
}

Используйте calc() для определения положения фонового изображения:

background-position: calc(50% + 17px) calc(50% + 10px), 50% 50%;

Используйте calc() для определения высоты элемента:

height: calc(100% - 20px);

функция attr ()

Возвращает значение атрибута выбранного элемента.

Ниже представлен элемент blockquote, который содержит символ внутри атрибута data-* который CSS может использовать (например, внутри ::before и ::after псевдоэлемента ), используя эту функцию.

<blockquote data-mark='"'></blockquote>

В следующем блоке CSS символ добавляется до и после текста внутри элемента:

blockquote[data-mark]::before,
blockquote[data-mark]::after {
    content: attr(data-mark);
}

функция линейного градиента ()

Создает изображение, представляющее линейный градиент цветов.

linear-gradient( 0deg, red, yellow 50%, blue);

Это создает градиент, идущий снизу вверх, с цветами, начинающимися с красного, затем желтым на 50% и заканчивающимся синим.

функция радиального градиента ()

Создает изображение, представляющее собой градиент цветов, излучающих из центра градиента

radial-gradient(red, orange, yellow) /*A gradient coming out from the middle of the
gradient, red at the center, then orange, until it is finally yellow at the edges*/

Функция var ()

Функция var () позволяет использовать переменные CSS.

/* set a variable */
:root {
    --primary-color: blue;
}

/* access variable */
selector {
    color: var(--primary-color);
}

Эта функция в настоящее время разрабатывается. Проверьте caniuse.com для последней поддержки браузера.