css 自定義屬性值，很多人喜歡叫它 css 變量，因為它和 js 的變量聲明和 函數調用很像。好了我們來看一下它到底是怎么樣的。
首先，第一步是聲明變量，在css 中一樣是使用 var 來聲明變量 如我要設置一個字體樣式：
.box{
font-size: var(--fz);
}
在這里通過 var 來聲明一個css 變量，變量名字前面一定要帶 -- 這是css變量的規范。
接下來是給這個變量賦值。
.box{
--fz: 24px; /* 它相當於一個表達式 ，將24px 賦值給變量 --fz */
font-size: var(--fz);
}
這樣就相當於是給這個box類的盒子設置了一個字體大小為24px
css變量也有全局變量和局部變量。在css中有一個偽類代表元素的根元素 ：root{ }
在HTML文件中 :root{} 和 html{ } 的優先級是一樣，所以如果是全局變量則一般是寫在 :root{ } 里面的。
局部變量是在一個類里面給這個變量賦值，然后這個變量會在 當前作用范圍 內覆蓋全局變量（並不會對原來對象有其他影響，符號css的優先級）
下面我們來看一下實例，這里是一個dom：
先看一下全局變量的創建和使用：
效果圖：設置了背景顏色為紅色
接下來是局部變量：
效果：
注： 在父級賦值的變量，它的作用范圍是這個父級元素的所有子元素。簡單來說就是這個父級變量的值可以繼承給它的子級變量。
所以在ul 設置了字體大小為 22px 的時候，子級再去聲明這個變量的時候如果不再重新賦值，則使用的是父級繼承過來的值，如果重新賦值，則會在當前范圍把父級繼承過來的值覆蓋掉
（也就是說當前子元素使用的是自己重新賦的值）
除此之外，css變量還可以同時使用多個變量。
效果圖：
接下來是函數的調用：
css的函數其實也不少，有80多個，不過我們平時常用的可能一半都不到，平時我們常用的一般就是2d，3d 的旋轉，縮放，翻轉，偏移等等，
計算的：max(), min(), calc(), 顏色的 rgb(), rgba(), 還有濾鏡filter的亮度、反色、對比度、透明度、模糊度等等這些函數，當然現在不是來給你們復習函數的，接下來是css函數的調用
例如我要設置一個背景，在懸浮的時候改變背景的色相、飽和度、亮度：
這里我使用的是：hsl() 函數， 它的第一個值代表：色相，第二個值代表：飽和度， 第三個值代表：亮度。
在這里第一個值通過調用 css 變量的方法來設置這個值。
其他的函數其實也是一樣的，就不做示范了。