在/css中全局定义变量

:root定义全局样式

 :root{
            font-size: 50px;

/* css中定义变量语法：--变量名:赋值的内容 （变量名不能用数字开头，不能是中文） */
            --borderColor: lightblue;
        }

 css中使用变量：使用var()函数

 .name{
            width: 150px;
            height: 90px;
            border: 1px solid var(--borderColor);
        }

 <p class="name">哈哈哈</p>

查看效果;

---

css中的变量，可以参与计算 ，需要使用函数calc(计算表达式)

 <div class="box">
        <span style="--i:1">h</span>
        <span style="--i:2">e</span>
        <span style="--i:3">l</span>
        <span style="--i:4">l</span>
        <span style="--i:5">o</span>
    </div>

通过计算表达式给上不同的宽：

  .box span{
             /* 将 行元素 转成 块元素 */
             display: block;
             width: calc(var(--i)*100px);
             height: 30px;
             line-height: 30px;
             border: 1px solid var(--borderColor);
             margin: 20px 0;
        }

查看效果：