CSS变量```js var() 函数菜鸟教程 - 学的不仅是技术，更是梦想！菜鸟教程 - 学的不仅是技术，更是梦想

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <title>菜鸟教程(runoob.com)</title>
    <style>
        :root {
            --main-bg-color: coral;
            --main-txt-color: blue;
            --main-padding: 15px;
        }

        #div1 {
            background-color: var(--main-bg-color);
            color: var(--main-txt-color);
            padding: var(--main-padding);
        }

        #div2 {
            /* 局部定义变量，覆盖默认 root 定义的全局变量 */
            --main-bg-color: green;
            --main-txt-color: red;
            background-color: var(--main-bg-color);
            color: var(--main-txt-color);
            padding: var(--main-padding);
        }

        #div3 {
            /* 定义局部变量 */
            --size: 22;
            background-color: var(--main-bg-color);
            color: var(--main-txt-color);
            /* 由于var()后面会默认跟随一个空格，因此在其后面加单位是无效的，比如：--size:20; font-size: var(--size)px会解析成font-size: 20 px; */
            padding: calc(var(--size) * 1px);
        }
    </style>
</head>

<body>
    <h1>var() 函数</h1>
    <div id="div1">菜鸟教程 - 学的不仅是技术，更是梦想！</div>
    <br />
    <div id="div2">菜鸟教程 - 学的不仅是技术，更是梦想！</div>
    <br />
    <div id="div3">菜鸟教程 - 学的不仅是技术，更是梦想！</div>
</body>

</html>