css中 “var()“ 和 “:root“的作用

我捡了她的猫

已于 2022-03-09 16:31:00 修改

阅读量1.2k

点赞数 5

文章标签： css css3 html

于 2022-03-09 16:30:09 首次发布

本文链接：https://blog.csdn.net/dcl199728/article/details/123380485

版权

css中 “var()” 和 ":root"
对于css中var和root相信很多小伙伴都很陌生，下面咱们就来详细讲一下这两个属性的作用

建一个css文件夹里面自定义一些全局css属性，属性名称可以随便写
:root {
  --background-color-base: #ffffff;
  --background-color-iphone: #e1e4f6;
  --background-color-secondary-base: #f4f4fb;
  --image-container-background-color: rgba(144, 144, 144, 0.5);
  --modal-title-background-color: #efefef;
  --small-title-gradient-background-color: linear-gradient(
    90deg,
    #efefef 0%,
    rgba(239, 239, 239, 0.36) 47%,
    rgba(239, 239, 239, 0) 100%
  );
  }

使用
.label {
     width: 65px;
     margin-right: 16px;
     display: inline-block;
     text-align: right;
     color: var(--background-color-base);
     background:var(--background-color-iphone);
 }

这些仅仅是自定义的css属性，在需要的时候可以使用var()函数引用
关于var()函数的作用和使用方法，参考：官网地址
说到这里，可能小伙伴们还不太明白这个到底干嘛的，我直接在css里面把颜色样式调整好不行吗？当然是可以的，但是我们如果涉及到皮肤切换，我们用这两个属性，一套代码就可以搞定，而且所有项目都可以复用，下期文章我们详细讲解下如何用一套代码做到皮肤切换。首次发表文章，编写不易，不喜勿喷