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

 

penguinclass 里面,创建一个--penguin-skin变量,且赋值为gray(灰色)

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

 

 

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

background: var(--penguin-skin);

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

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

 

 

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

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

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

 

 

 

创建 自定义CSS变量

使用CSS变量

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

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

上一篇:Vue.js组件的使用


下一篇:图表(Chart & Graph)你真的用对了吗?