首发地址：https://mp.weixin.qq.com/s/WL...更多技术分享及时获取，欢迎关注~》为什么要了解css自定义属性？有哪些css自定义属性的使用呢？在声明式语言中引入变量，大大增强了它在某些特定场景下的灵活性。现在带着问题进入正文~1.使用以--开头的方法约定作为自定义属性，声明如下---color:.container{--color:blue;}声明的自定义属性如何使用？使用var()来获取自定义属性的值：p{background-color:var(--color,red);//第二个参数为默认值：当--color无效时，使用red}注意事项：1.Scope中上面的例子，自定义属性--color的作用域是包含容器及其后代的类的元素。换句话说，如果上面例子中的p元素在父作用域链中没有找到--color声明,red会作为默认值，如果你想让--color在全局范围内作为变量使用，可以这样设置：:root{--color:red;}如果一个模块中的元素想拥有自己统一的--color，只需将其添加到模块样式中重新声明覆盖其模块内的父作用域的值。2.自定义属性（变量s)区分大小写3.内联声明的方法设置背景颜色是可行的：4.结合calc函数和多个自定义属性calc：用于动态计算长度值。支持“+”、“-”、“*”、“/”操作；运算符前后需要保留一个空格（笔者只测试了+和-不留空格，会出现解析问题，但为了规范起见，最好保留），例如：width:计算（100%-10px）；多个自定义属性相互引用：root{--font-base:20px;}p{--font-self:calc(var(--font-base)*2);字体大小：var(--font-self)；}二、自定义属性值的获取和设置1.get--color自定义属性值//getComputedStyle|getPropertyValuegetComputedStyle(document.querySelector('.container')).getPropertyValue('--color').trim();2.set--color自定义属性值document.body.style.setProperty('--color',val)一旦设置了自定义属性值更改时，所有关联的CSS属性都会更新，即容易实现批量更新元素属性值。3、应用示例：主题色//自测看效果：root{--color:red;--背景：粉色；}p,h1{颜色:var(--color);背景：var(--background)}

我的第一个标题

这是文字