前言在现代浏览器中，我们经常会看到这样的属性：element{--main-bg-color:brown;}这里我们就来介绍一下他，并提供一些相关的DescriptionofIntroductionCustomproperties（有时也称为CSS变量或级联变量）由CSS作者定义并包含可在整个文档中重复使用的值。通过自定义属性标签（eg:--main-color:black;）设置值，通过var()函数获取值（eg:color:var(--main-color);）Declarationdeclares自定义属性，属性名需要以两个减号（--）开头，属性值可以是任何有效的CSS值。前言中的--main-bg-color属性的一般最佳实践是将其定义在根伪类:root下，以便可以在HTML文档中的任何位置访问它：/*:root选择器匹配文档根元素。*//*在HTML中，根元素始终是html元素。*//*也就是说：root表示根元素*/:root{--main-bg-color:brown;}注意：自定义属性名是区分大小写的，--my-color和--my-颜色将被视为两个不同的自定义属性。同时不能包含$、[、^、(、%等字符，普通字符仅限于“数字[0-9]”、“字母[a-zA-Z]”、"underscore_"和"dash-"这些组合，但可以是中文、日文或韩文，例如body{--darkblue:#369;background-color:var(--darkblue);}使用element{background-color:var(--main-bg-color);}这些自定义属性只会在需要的时候计算，不会按照其他规则保存。比如你不能给一个元素设置一个属性，然后让它从兄弟或后代的规则中获取值，该属性只用于匹配当前选择器及其后代，与通常的CSS相同，默认值使用var()函数定义多个回退值时。thegivenvalueisnotdefined,fallbackvaluewillbeusedValuesubstitution./*如果提供第二个参数，则表示替代值，当自定义属性时生效但值无效。第二个参数可以嵌套，但不能继续平铺，例如：*/.two{color:var(--my-var,red);/*如果--my-var未定义则为红色*/}.three{background-color:var(--my-var,var(--my-background,pink));/*粉红色，如果--my-var和--my-background未定义*/}.three{background-color:var(--my-var,--my-background,pink);/*Invalid:"--my-background,pink"*/}第二个例子展示了如何处理多个回退。这种技术可能会导致性能问题，因为它会花费更多时间来处理这些变量。js中的操作在JavaScript中获取或修改CSS变量与操作普通的CSS属性是一样的：//获取Dom节点上的CSS变量element.style.getPropertyValue("--my-var");//获取任意CSS变量在Dom节点上getComputedStyle(element).getPropertyValue("--my-var");//在Dom节点上修改一个CSS变量element.style.setProperty("--my-var",jsVar+4);SpaceCSS变量主体的尾随特征{--size:20;font-size:var(--size)px;}其中font-size:var(--size)px相当于font-size:20px，注意20后面有个空格，所以这里的font-size使用
元素的默认大小。使用场景简单实现一个进度条：外面有一个背景图层，然后里面有一个进度条和进度值。以前是用两层div元素，然后JS改变里面的彩条宽度，同时设置进度值。