变量声明CSS自定义属性也叫CSS变量。变量具有合法的标识符和合法的值，可以在任何地方使用。通过var()函数使用变量。1.声明一个局部变量：.jelly{--main-bg-color:#e91e63;}2.使用一个局部变量：.jelly{background-color:var(--main-bg-color);}3.声明一个全局CSS变量：:root{--global-color:#666;}3.使用一个全局CSS变量：.jelly{color:var(--global-color);}var()var()函数也可以使用第二个参数来表示变量的默认值。如果该变量不存在，将使用此默认值。颜色：var(--颜色)；变量名区分大小写，--header-color和--Header-Color是两个不同的变量。在变量作用域中具有较高优先级选择器的变量声明会覆盖较低优先级的选择器。body{--color:red;}p{--color:black;}结合计算高度：calc(100vh-var(--header-height));第二个参数不处理内部逗号或空格，被认为是参数的一部分。js操作css变量读取变量值：constdom=document.querySelector('selector');dom.style.getPropertyValue('--color');修改css变量的值：constdom=document.querySelector('selector');dom.style.setProperty('--color','white');可以在多个选择器中声明同一个CSS变量。读取时，优先级最高的声明生效。这与CSS的“级联”规则是一致的。element.style.getPropertyValue("--my-var");getComputedStyle(element).getPropertyValue("--my-var");element.style.setProperty("--my-var",jsVar+4);javascript检测浏览器支持constisSupported=window.CSS&&window.CSS.supports&&window.CSS.supports('--a',0);超可爱的冷冻效果：
