background:var(--clr);
来源：2-12 空间移动
能量咕噜略略
2021-12-10 20:45:52
老师，类似这样的语法是什么意思，我从google上看到的，能不能解释下var(--);这类的含义，比如：
<p style="--clor:#ff22bb;--i:0;">这类的含义，animation-delay:calc(0.33s * var(--i))，还有一个就是inset属性，我看到写法是 inset:20px 20px 0 0; 能否详细解释下以上的用法，因为我很多非常炫酷的效果都是靠css写出来的
写回答
1回答
-
好帮手慕小李
2021-12-11
同学你好，解答如下：
1、同学看到的写法如<p style="--clor:#ff22bb;--i:0;">--clor是自定义属性，其中的--i也是。
2、animation-delay:calc(0.33s * var(--i))，这里的var()是在css中直接使用了获取自定义属性i的方法。
结合1、2点如下：
效果如下：
3、inset解释如下图：
以上的知识点可以结合css动画实现效果，同学如有思路，老师支持同学尝试做一做，加油。
祝学习愉快！
1
