css中var函数

引言：

　　在学习elementui的时候看到一个var.css， 其中写的全部都是以--开头的属性，上google查询不是css3新增的属性，于是决定一探究竟

　　

:root {

  /*
    Transition
  -------------------------- */
  --fade-transition: opacity 300ms cubic-bezier(0.23, 1, 0.32, 1);
  --fade-linear-transition: opacity 200ms linear;
  --md-fade-transition: transform 300ms cubic-bezier(0.23, 1, 0.32, 1) 100ms, opacity 300ms cubic-bezier(0.23, 1, 0.32, 1) 100ms;
  --border-transition-base: border-color .2s cubic-bezier(.645,.045,.355,1);
  --color-transition-base: color .2s cubic-bezier(.645,.045,.355,1);

这些到底是什么鬼？

原来这些仅仅是一些自定义的css属性，在需要的时候可以使用var()函数引用

关于var()函数的作用和使用方法，请参阅在mdn中查到相关内容

补充：:root是一个伪类，表示文档根元素，非IE及ie8及以上浏览器都支持，在:root中声明相当于全局属性，只要当前页面引用了:root segment所在文件，都可以使用var()来引用