css变量的使用

css变量使用场景：比如更改网站主题颜色的时候，一个一个页面的更改肯定很麻烦对吧，如果有一个同一的变量更改会不会就很方便。

  <style>
    :root {
      --base: yellow;
    }
    #oval {
      width: 200px;
      height: 100px;
      background: var(--base);
      border-radius: 100px / 50px;
    }
  </style>

  <div id="oval"></div>

定义一个变量在:root伪类上，使用变量来减少重复的代码。

:root {
      --base: yellow;
  }

使用该变量

 background: var(--base);