css有一些強大的函數:
1. calc
可以混合多種單位來計算
div { font-size: calc(100vw/5 + 1rem - 100px) }
2. max、min、clamp
max、min選最大/小的那個
clamp() 則是給一個值限定一個范圍,超出范圍外則使用范圍的最大或者最小值。(現在帶webkit前綴可以使用)
div{ width:max(10% + 20px, 300px); }
3.toggle
toggle() 函數在規則選中多於一個元素時生效,它會在幾個值之間來回切換,比如我們要讓一個列表項的樣式圓點和方點間隔出現,可以使用下面代碼:
ul { list-style-type: toggle(circle, square); }
4.attr
用來獲取元素的屬性值,目前只能在content處使用
<div data-name="abc" title="123"></div>
<style> div:before { content:attr(data-name)" "attr(title); } </style>