Функция CSS var()

Определение и использование

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

Пример

Пример 1

Сначала声明 глобальную переменную с именем --main-bg-color, а затем используйте её в таблице стилей: var() Функция вставки значения переменной:

:root {
  --main-bg-color: coral;
}
#div1 {
  background-color: var(--main-bg-color);
}
#div2 {
  background-color: var(--main-bg-color);
}

Попробуйте сами

Пример 2

Другой пример использования var() Пример использования функции для вставки нескольких значений CSS-переменных:

:root {
  --main-bg-color: coral;
  --main-txt-color: blue;
  --main-padding: 15px;
}
#div1 {
  background-color: var(--main-bg-color);
  color: var(--main-txt-color);
  padding: var(--main-padding);
}
#div2 {
  background-color: var(--main-bg-color);
  color: var(--main-txt-color);
  padding: var(--main-padding);
}

Попробуйте сами

Грамматика CSS

var(--name, value)

Технические детали

Поддержка браузеров

Таблица цифр показывает версию браузера, которая полностью поддерживает эту функцию.

Связанные страницы

Урок:Переменные CSS