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()來引用