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 变量