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() 插入自定义属性的值