Референсное руководство по функциям CSS
- Предыдущая страница Думные элементы CSS
- Следующая страница Свойства анимации CSS
Функции CSS
Функции CSS могут использоваться для вычисления значений, манипулирования строками или цветами, создания сложных градиентов и форм и т.д.
Функции CSS обычно используются в качестве значений различных свойств CSS.
| Функция | Описание |
|---|---|
| acos() | Возврат арккосинуса числа между -1 и 1. |
| asin() | Возврат арксины числа между -1 и 1. |
| atan() | Возврат арккотангенса числа между -∞ и ∞. |
| atan2() | Возврат арккотангенса двух значений между -∞ и ∞. |
| attr() | Возврат значения свойств выбранного элемента. |
| blur() | Применить эффект размытия к элементам. |
| brightness() | Изменять亮度 элементов (более ярко или темнее). |
| calc() | Разрешить вычисления для определения значений свойств CSS. |
| circle() | Определить круг. |
| clamp() | Установить значение, которое будет изменяться между минимальным и максимальным значениями в зависимости от размера视ора. |
| color() | Разрешить указание цвета в заданном цветовом пространстве. |
| color-mix() | В заданном цветовом пространстве смешивать два значения цветов по заданному соотношению. |
| conic-gradient() | Создать коническую градиентную заливку. |
| contrast() | Изменять контрастность элементов. |
| cos() | Возврат косинуса угла. |
| counter() | Возврат текущего значения именованного счетчика. |
| counters() | Возврат текущего значения счетчика с именем и вложенности. |
| cubic-bezier() | Определить三次 Бэзиса. |
| drop-shadow() | Применить эффект проекции к изображению. |
| ellipse() | Определить эллипс. |
| exp() | Возвратить заданное количество степеней E.x) |
| fit-content() | Разрешается изменять размер элементов в зависимости от содержимого. |
| grayscale() | Преобразование изображения в градации серого. |
| hsl() / hsla() | Определение цвета с помощью модели цвета HSL (色调-насыщенность-светимость); опционально включает компонент alpha. |
| hue-rotate() | Применение цветового поворота к элементам. |
| hwb() | Определение цвета с помощью модели цвета HWB (色调-белизна-чёрнота); опционально включает компонент alpha. |
| hypot() | Возврат квадратного корня из суммы квадратов её параметров. |
| inset() | Определение прямоугольника, который поддерживает заданное внутреннее смещение от каждого края отсылочной рамки. |
| invert() | Обратное изменение цветов изображения. |
| lab() | Указание цвета в пространстве цветов CIE Lab. |
| lch() | Указание цвета в пространстве цветов LCH (亮度-хроматичность-цвет). |
| light-dark() | Включение двух значений цветов, если пользователь установил световую тему, возвращает первое значение; Возврат второго значения, если пользователь установил тёмную тему. |
| linear-gradient() | Создание линейного градиента. |
| log() | Возврат натурального логарифма заданного числа (с основанием E) или логарифма с заданным основанием. |
| matrix() | Определение 2D-трансформации с помощью шестизначной матрицы. |
| matrix3d() | Определение 3D-трансформации с помощью 4x4-матрицы. |
| max() | Использование максимального значения из списка значений, разделенных запятыми, в качестве значения свойства. |
| min() | Использование минимального значения из списка значений, разделенных запятыми, в качестве значения свойства. |
| minmax() | Определение интервала значений大小的, который включает значения, больше или равные минимальному значению и меньше или равные максимальному значению (для CSS-сетки). |
| mod() | Возврат остатка от деления одного числа на другое. |
| oklab() | Указание цвета в пространстве цветов OKLAB. |
| oklch() | Указание цвета в пространстве цветов OKLCH. |
| opacity() | Применение эффекта непрозрачности к элементам. |
| perspective() | Определение перспективы для элементов 3D-трансформации. |
| polygon() | Определение многоугольника. |
| pow() | Возврат значения числа (x) в степени числа (y). |
| radial-gradient() | Создание радиального градиента. |
| ray() | Определение отрезка линии смещения, которую должен следовать элемент анимации. |
| rem() | Возврат остатка от деления одного числа на другое. |
| repeat() | Повторение группы столбцов или строк в сетке. |
| repeating-conic-gradient() | Повторяющийся конический градиент. |
| repeating-linear-gradient() | Повторяющийся линейный градиент. |
| repeating-radial-gradient() | Повторяющийся радиальный градиент. |
| rgb() / rgba() | Определить цвет с использованием модели красный-зеленый-синий (RGB); опционально включить компонент alpha. |
| rotate() | Определить 2D вращение элемента. |
| rotate3d() | Определить 3D вращение элемента. |
| rotateX() | Определить 3D вращение элемента вокруг оси x (горизонтально). |
| rotateY() | Определить 3D вращение элемента вокруг оси y (вертикально). |
| rotateZ() | Определить 3D вращение элемента вокруг оси z. |
| round() | Округлить число по заданной стратегии округления. |
| saturate() | Регулировать насыщенность элемента (интенсивность цвета). |
| scale() | Определить 2D масштаб элемента. |
| scale3d() | Определить 3D масштаб элемента. |
| scaleX() | Горизонтально масштабировать элемент (ширину). |
| scaleY() | Вертикально масштабировать элемент (высоту). |
| sepia() | Преобразовать изображение в sepia. |
| sin() | Вернуть синус угла числа. |
| skew() | Наклонить элемент по осям x и y. |
| skewX() | Наклонить элемент по оси x. |
| skewY() | Наклонить элемент по оси y. |
| sqrt() | Вернуть квадратный корень из числа. |
| steps() | Создать шаговую функцию времени для анимации. |
| sin() | Вернуть синус угла числа. |
| translate() | Позволяет перенести элемент по осям x и y. |
| translateX() | Позволяет перенести элемент по оси x. |
| translateY() | Позволяет перенести элемент по оси y. |
| url() | Позволяет включать файлы в таблицу стилей. |
| var() | Вставить значение пользовательского свойства. |
- Предыдущая страница Думные элементы CSS
- Следующая страница Свойства анимации CSS
