CSS中定义变量，并使用变量设置属性值

 :root{
      --base: yellow;
      --spacing: 10px;
      --blur: 10px;
    }

上面代码定义了3个变量，：root使得所有人可访问

    img{
      filter: blur(var(--blur));
      padding: var(--spacing);
      background: var(--base);
 
    }

 

还可以通过js改变变量的值，从而改变属性

 

<script type="text/javascript">
document.styleSheets["0"].cssRules["0"].style.cssText = "--base: red;";
</script>