CSS中也有函數，我們也會經常用到，今天我就來羅列一下CSS中所有的函數
先從CSS2說起
在CSS2中有兩個函數，這兩個函數有一個使我們經常用到的
| rgb() | 使用紅(R)、綠(G)、藍(B)三個顏色的疊加來生成各式各樣的顏色。 |
| attr() | 返回選擇元素的屬性值。 |
它有一個必須值，這個值必須是HTML元素的屬性名，我們來看個例子
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>attr</title>
<style>
a:after {content: " (" attr(href) ")";}
</style>
</head>
<body>
<p><a href="https://www.dzyong.com">鄧佔勇的個人網站</a></p>
<p><strong>注意:</strong> IE8 需要聲明 !DOCTYPE 纔可以支持 attr() 函數。</p>
</body>
</html>
運行結果：
這可以使得我們在HTML中靈活的控制CSS，可以動態調整樣式，比如傳入一個數值來動態設置它的背景顏色。
CSS3中
如rgb()相比，它可以傳入第4個參數，來設置顏色的透明度。
- 紅色（R）0 到 255 間的整數，代表顏色中的紅色成分。。
- 綠色（G）0 到 255 間的整數，代表顏色中的綠色成分。
- 藍色（B）0 到 255 間的整數，代表顏色中的藍色成分。
- 透明度（A）取值 0~1 之間， 代表透明度。
| hsl() | 使用色相、飽和度、亮度來定義顏色。 |
| hsla() | 使用色相、飽和度、亮度、透明度來定義顏色。 |
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>hsla</title>
<style>
#p1 {background-color:hsla(120,100%,50%,0.3);}
#p2 {background-color:hsla(120,100%,75%,0.3);}
#p3 {background-color:hsla(120,100%,25%,0.3);}
#p4 {background-color:hsla(120,60%,70%,0.3);}
#p5 {background-color:hsla(290,100%,50%,0.3);}
#p6 {background-color:hsla(290,60%,70%,0.3);}
</style>
</head>
<body>
<p>HSL 顏色，並使用透明度:</p>
<p id="p1">綠色</p>
<p id="p2">淺綠</p>
<p id="p3">暗綠</p>
<p id="p4">柔和的綠色</p>
<p id="p5">紫色</p>
<p id="p6">柔和的紫色</p>
</body>
</html>
linear-gradient() 與 radial-gradient()
linear-gradient() 函數用於創建一個線性漸變的 "圖像"。
爲了創建一個線性漸變，你需要設置一個起始點和一個方向（指定爲一個角度）的漸變效果。你還要定義終止色。終止色就是你想讓Gecko去平滑的過渡，並且你必須指定至少兩種，當然也會可以指定更多的顏色去創建更復雜的漸變效果。
background-image: linear-gradient(direction, color-stop1, color-stop2, ...);
注意： Internet Explorer 9 及更早版本 IE 瀏覽器不支持漸變。
| direction | 用角度值指定漸變的方向（或角度）。 |
| color-stop1, color-stop2,... | 用於指定漸變的起止顏色。 |
radial-gradient() 函數用徑向漸變創建 "圖像"。徑向漸變由中心點定義。爲了創建徑向漸變你必須設置兩個終止色。
background-image: radial-gradient(shape size at position, start-color, ..., last-color);
| shape | 確定圓的類型:
|
| size | 定義漸變的大小，可能值：
|
| position | 定義漸變的位置。可能值：
|
| start-color, ..., last-color | 用於指定漸變的起止顏色。 |
repeating-linear-gradient() 與 repeating-radial-gradient()
與前面兩個漸變不同，這兩個可創建重複性漸變，直接看例子
background-image: repeating-linear-gradient(45deg,red,blue 7%,green 20%);
這裏的7%與20%表示顏色終止的位置，可看到最大的值爲20%，所以整個漸變重複了5次。
background-image: repeating-radial-gradient(red, yellow 10%, green 15%);
ubic-bezier() 函數定義了一個貝塞爾曲線(Cubic Bezier)。貝塞爾曲線曲線由四個點 P0，P1，P2 和 P3 定義。P0 和 P3 是曲線的起點和終點。P0是（0,0）並且表示初始時間和初始狀態，P3是（1,1）並且表示最終時間和最終狀態。
這個函數有什麼用呢，我們常在動畫過度中使用這個函數 ，來自定義動畫進度。
注意: Internet Explorer 9 及其更早版本的瀏覽器不支持該效果。
var() 函數用於插入自定義的屬性值，如果一個屬性值在多處被使用，該方法就很有用。
這個函數我覺得是非常方便實用的一個函數，類似於sass、stylus、less等預處理其中的變量，對於一個多處用到的值我們可以單獨定義出來，方便後期的維護。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>var</title>
<style>
:root {
--main-bg-color: pink;
}
#div1 {
background-color: var(--main-bg-color);
padding: 5px;
}
#div2 {
background-color: var(--main-bg-color);
padding: 5px;
}
#div3 {
background-color: var(--main-bg-color);
padding: 5px;
}
</style>
</head>
<body>
<h1>var() 函數</h1>
<div id="div1">鄧佔勇的個人網站（www.dzyong.com）</div>
<br>
<div id="div1">鄧佔勇的個人網站（www.dzyong.com）</div>
<br>
<div id="div1">鄧佔勇的個人網站（www.dzyong.com）</div>
</body>
</html>
calc()
calc() 函數用於動態計算長度值。
- 需要注意的是，運算符前後都需要保留一個空格，例如：
width: calc(100% - 10px)； - 任何長度值都可以使用calc()函數進行計算；
- calc()函數支持 "+", "-", "*", "/" 運算；
- calc()函數使用標準的數學運算優先級規則；