CSS var()函数

• 

  定义和用法

  var()函数用于插入自定义属性的值，而不是另一个属性的值的任何部分。

  特征	说明
  CSS版本	CSS3

• 

  浏览器支持

  表中的数字指定了完全支持该属性的第一个浏览器版本。数字后跟-ms-， -webkit-，-moz-或-o-指定使用前缀的第一个版本。

  函数	IE/Edge	Chrome	FireFox	Safari	Opera
  函数名称
  var()	15.0	49.0	31.0	9.1	36.0

• 

  CSS语法

  var(custom-property-name, value)
  

  值	描述
  custom-property-name	必需的。 自定义属性的名称（必须以两个破折号开头）
  value	可选的。 回退值（如果自定义属性无效，则使用）

• 

  实例

  首先定义一个名为“--main-bg-color”的自定义属性，然后使用var()函数在样式表中稍后插入自定义属性的值：

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

  尝试一下

  使用var()函数插入多个自定义属性值：

  :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);
  }
  

  尝试一下