CSS3引入了一個新函數——var()函數,用于定義自定義變量,從而可以在CSS中更方便的使用變量。
:root { --primary-color: blue; --secondary-color: green; } .btn { color: var(--primary-color); background-color: var(--secondary-color); }
這個例子中,使用了:root偽類來定義幾個自定義變量。通過給元素添加類名.btn,可以使用var()函數來使用這些變量。這樣在后期需要更改顏色時,只需要修改變量,就可以同時修改所有使用變量的元素。
var()函數也可以使用默認值。當變量未定義時,可以指定一個默認值。
.myclass { color: var(--mycolor, red); }
這個例子中,如果--mycolor未定義,那么顏色將會默認為紅色。
總而言之,var()函數是CSS3中一個非常有用的函數,它可以使CSS的使用更加方便。將變量定義在:root中可以使其在全局起作用,同時在元素中使用var()函數可以直接使用這些變量。
上一篇css3 制作三角形
下一篇css3 凹角邊框