创建一个自定义的 CSS 变量、使用一个自定义的 CSS 变量、给 CSS 变量附加回退值

在penguinclass 里面，创建一个--penguin-skin变量，且赋值为gray（灰色）。

创建变量后，CSS 属性可以通过引用变量名来使用它的值。

background: var(--penguin-skin);

因为引用了--penguin-skin变量的值，使用了这个样式的元素背景颜色会是灰色。

使用变量来作为 CSS 属性值的时候，可以设置一个备用值来防止由于某些原因导致变量不生效的情况。

或许有些人正在使用着不支持 CSS 变量的旧浏览器，又或者，设备不支持你设置的变量值。为了防止这种情况出现，那么你可以这样写：

创建 自定义CSS变量

使用CSS变量

如果变量名写错了 会启用备选