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);
    }
    
    尝试一下