1. calc( )函數
calc() 函數用於動態計算長度值。
①： 運算符前後都需要保留一個空格，例如：width: calc(100% - 10px)；
②： 任何長度值都可以使用calc()函數進行計算；
③： calc()函數支持 “+”, “-”, “*”, “/” 運算；
④： calc()函數使用標準的數學運算優先級規則；
例： 創建一個橫跨屏的div,兩邊各有50px的間隙
用絕對定位，（margin-left等控制的寬度會有變化 ）控制div距左邊50px,控制其寬度爲屏幕寬度的100%減去100px,減掉的100px包含距離左邊的50px,也控制了距離右邊50px。
<h3 class="test-calc">測試calc</h3>
.test-calc{
background-color:yellow;
border:1px solid red;
position:absolute;
top:100px;
left:50px;
width:calc(100% - 100px);
padding:5px;
}
2. attr( )函數
· attr() 函數返回選擇元素的屬性值。
<div><a href="https://www.baidu.com/">百度一下</a></div>
<div class="test-attr" data-id="task-id111">返回選擇元素的屬性值：</div>
/*在a內容後加括號和href的屬性值*/
a:after{
content:"("attr(href)")";
font-size: 12px;
color: rgb(107, 177, 243);
margin-left: 10px;
}
/* 在有data-id屬性的元素後面添加上，data-id的屬性值*/
.test-attr:after{
content: ""attr(data-id)"";
color:red;
font-size: 18px;
}
前後對比：
3. linear-gradient() 函數
· linear-gradient() 函數用於創建一個線性漸變的 “圖像”。
爲了創建一個線性漸變，你需要設置一個起始點和一個方向（指定爲一個角度）的漸變效果。你還要定義終止色。終止色就是你想讓Gecko去平滑的過渡，並且你必須指定至少兩種，當然也會可以指定更多的顏色去創建更復雜的漸變效果。
. 從左上角到右下角的線性漸變:
.test-linear-gradient{
width: 150px;
height: 50px;//得有高度
從左上角到右下角的線性漸變:
background: linear-gradient(to bottom right, lightblue,lightyellow);//從上到下
}
· 線性漸變指定一個角度:
.test-linear-gradient{
width: 150px;
height: 50px; /*高度必須 */
background: linear-gradient(360deg,lightblue,lightyellow); /* 線性漸變角度360度 */
}
. 使用透明度的線性漸變 （ 通過rgba ）:
爲了添加透明度，我們使用 rgba() 函數來定義顏色結點。rgba() 函數中的最後一個參數可以是從 0 到 1 的值，它定義了顏色的透明度：0 表示完全透明，1 表示完全不透明( 正常 )。
.test-linear-gradient{
width: 150px;
height: 50px; /*高度必須 */
background: linear-gradient(to right top,rgba(255,0,0,0.1),rgba(255,0,0,1)); /* 往右上角漸變，透明度0.1到1 */
}
4. radial-gradient( ) 函數
· adial-gradient() 函數用徑向漸變創建 “圖像”。
徑向漸變由中心點定義。爲了創建徑向漸變你必須設置兩個終止色。
圓形徑向漸變:如下：
顏色結點均勻分佈 ：（ 不定義百分比 ）
<div class="test-radial-gradient"></div>
.test-radial-gradient{
height:80px;
width:80px;
background:radial-gradient(circle,red,yellow,lightyellow,red);/* circle指定原形徑向漸變，默認是 ellipse 橢圓形的徑向漸變。 */
}
顏色結點不均勻分佈：（ 利用百分比 ）
.test-radial-gradient{
width: 100px;
height: 100px;
background:radial-gradient(red 15%,yellow 60%,lightyellow 25%)
}
5. repeating-linear-gradient() 函數
重複的線性漸變函數：
<div class="box"></div>
<style>
.box{
height:80px;
width:80px;
background: repeating-linear-gradient(45deg,red , yellow 50%, lightyellow 30%);
}
</style>
6. repeating-radial-gradient() 函數
重複的徑向漸變函數：
<div class="test-repeating-radial"> </div>
.test-repeating-radial{
height:80px;
width:80px;
background: repeating-radial-gradient(red 20%, yellow 50%, lightyellow 60% );
}
7. var() 函數
這裏需要了解一下 自定義屬性（-*）：CSS變量: 在 CSS選擇器中聲明, 變量名必須以兩個破折號 （-）開頭，如：–mode-bg_color; 區分大小寫。對於全局範圍，您可以使用：root或body`選擇器。
即，前綴爲的屬性名稱–（如–example-name）表示自定義屬性，這些自定義屬性包含一個可以在使用該var() 函數的其他聲明中使用的值。
聲明一個自定義屬性 （ CSS變量 或者 級聯變量）語法：
element { /* 這裏的element代表CSS的選擇器 */
--main-bg-color: lightblue;
}
使用該變量 ( 用 css函數 var() ) ：
.test1{
background-color: var(--main-bg-color);
}
注意：
:root 是一個 CSS 僞類，它代表文檔的根元素。對於 HTML 來說，:root 表示 <html> 元素，除了優先級更高之外，與 html 選擇器相同。
var() 函數用於插入自定義的屬性值，如果一個屬性值在多處被使用，該方法就很有用。
語法 ： **var(變量名, 變量值 )**第二個參數，“變量值”可寫可不寫，是一個備用值，在屬性不存在的時候使用
<div class="test-css_var"></div>
:root{
--mode-bg_color:lightblue; /* 定義一個 全局範圍的 css 變量 ，名爲--mode-bg_color*/
}
.test-css_var{
width: 100px;
height: 100px;
background: var(--mode-bg_color); /* 通過CSS 函數var() 使用剛剛定義的CSS變量，將元素的背景色設爲lightblue */
}
8. cubic-bezier() 函數
定義了一個貝塞爾曲線(Cubic Bezier)。
它可以實現，ease-in等動畫效果 ，cubic-bezier(.42, 0, 1, 1)的效果等同於ease-in
cubic-bezier的功能演示，參考：https://wow.techbrood.com/fiddle/28015
cubic-bezier() 效果，參考鏈接：https://cubic-bezier.com，
最初提到該地址的博客是：https://blog.csdn.net/lucky541788/article/details/83649881
- css 動畫中 ease,seae-in,ease-in-out,ease-out,效果區別
參考博文鏈接： https://blog.csdn.net/Candy_10181/article/details/80611009，
博主做了如下表格的總結：
css動畫值 描述 linear 規定以相同速度開始至結束的過渡效果（等於 cubic-bezier(0,0,1,1)）。(勻速) ease 規定慢速開始，然後變快，然後慢速結束的過渡效果（cubic-bezier(0.25,0.1,0.25,1)）（相對於勻速，中間快，兩頭慢）。 ease-in 規定以慢速開始的過渡效果（等於cubic-bezier(0.42,0,1,1)）（相對於勻速，開始的時候慢，之後快）。 ease-out 規定以慢速結束的過渡效果（等於cubic-bezier(0,0,0.58,1)）（相對於勻速，開始時快，結束時候間慢，）。 ease-in-out 規定以慢速開始和結束的過渡效果（等於cubic-bezier(0.42,0,0.58,1)）（相對於勻速，（開始和結束都慢）兩頭慢）。 cubic-bezier(n,n,n,n) 在 cubic-bezier 函數中定義自己的值。可能的值是 0 至 1 之間的數值。
9. rgb()函數
rgb() 函數使用紅(R)、綠(G)、藍(B)三個顏色的疊加來生成各式各樣的顏色。
/* <p class="red"> 紅色 </p> */
.red { color: rgb(255,0,0); } /* 字體將顯示爲 紅色*/
10. rgba()函數
rgba() 使用紅(R)、綠(G)、藍(B)、透明度(A)的疊加來生成各式各樣的顏色。
/* <p class="red"> 紅色 </p> */
.red { color: rgb(255,0,0,0.3); } /* 字體顏色比紅色淺，類似 粉色*/
11. hsl()函數
使用色相、飽和度、亮度來定義顏色。
/* <p id="p2">淺綠</p> */
#p2 {background-color:hsl(120,100%,75%);}
12. hsla()函數
使用色相、飽和度、亮度、透明度來定義顏色。
