CSS 变量

• 

  CSS自定义属性（变量）

  var()函数可用于插入自定义属性的值。
• 

  浏览器支持

  函数	Internet Explorer	Chrome	FireFox	Safari	Opera
  函数名
  var()	15.0（含）以上	49.0（含）以上	31.0（含）以上	9.1（含）以上	36.0（含）以上

• 

  var()函数

  CSS中的变量应该在定义其范围的CSS选择器中声明。对于全局范围，您可以使用：root或body选择器。变量名必须以两个破折号（ - ）开头，并且区分大小写！该var()函数的语法如下：

  var(custom-name, value)

  • custom-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);
  }
  
  

  尝试一下
• 

  CSS var()函数

  函数	描述
  var()	插入自定义属性的值