1. attr()
用來選擇元素的屬性值，用法：attr(html元素的屬性名)，正常搭配css content一起使用
html:
<p><a href="http://a.b.c" name="attr">十</a></p>
<p><a href="http://d.f.e" name="我是誰">九</a></p>
css:
a:after{content:'('attr(href) '/' attr(name) ')'}
結果：
十(http://a.b.c / attr)
九(http://d.f.e / 我是誰)
複製程式碼2. calc()
用於動態計算長度值 calc(數學表示式)
-
運算子前後需要有空格
-
不管什麼長度都可以用calc計算
-
calc() 支援 '+','-','*','/' 等運算
-
calc() 使用標準的數學運算優先順序規則
語法：
width: calc(70% - 60px) height: calc(70% / 2 * 12 + 66px)
3. linear-gradient()
用於 建立一個線性漸變的 影像，需要設定一個起點一個方向，還可以定義角度起始顏色等。
語法：
background: linear-gradient(direction, color-stop1, color-stop2, ...);
direction: 指定漸變方向的角度 （可以省略）
color-stop1： 指定漸變的起止顏色
複製程式碼示例：
background: linear-gradient(red,yellow,blue,green);
// 結果如下，在未設定漸變角度是自上而下的
複製程式碼
示例：
background: linear-gradient(12deg,red,yellow,blue,green);
// 結果如下，設定漸變角度後
複製程式碼
示例：
background: linear-gradient(to left top,red,yellow,blue,green);
// 結果如下，漸變角度可以從某個方向到另外一個方向
複製程式碼
4. radial-gradient()
用法和linear-gradient()差不多，只不過它是用徑向漸變建立影像，漸變由中心點定義，必須設定兩個終止色（區別）
語法：
background: radial-gradient(shape size at position, start-color, ..., last-color);
shape: 確定圓的型別（選填）
- ellispe(預設): 指定橢圓形的徑向漸變
- circle： 指定圓形的徑向漸變
size: 指定徑向漸變的大小（選填）
- farthest-corner(預設)： 指定徑向漸變的半徑長度為從圓心到離圓心最遠的角
- closest-side： 指定徑向漸變的半徑長度為從圓心到離圓心最近的邊
- closest-corner： 指定徑向漸變的半徑長度為從圓心到離圓心最近的角
- farthest-side：指定徑向漸變的半徑長度為從圓心到離圓心最遠的邊
position: 定義漸變的位置（選填）
- center(預設)：設定中間為徑向漸變圓心的縱座標值
- top：設定頂部為徑向漸變圓心的縱座標值
- bottom：設定底部為徑向漸變圓心的縱座標值
start-color, ..., last-color：定義漸變的起止色
複製程式碼示例：
background: radial-gradient(red, green, blue, yellow);
// 結果如下，漸變從中心往外擴散
複製程式碼
示例：
background: radial-gradient( red 5%, green 10%, blue 15%,yellow 20%);
// 結果如下，可以單獨設定每個顏色的佔比
複製程式碼
示例：
background: radial-gradient(circle, red, green, blue, yellow);
// 結果如下，徑向漸變設定為圓形，預設為橢圓形
複製程式碼
5. repeating-linear-gradient()
建立重複的線性漸變影像
語法：
background: repeating-linear-gradient(angle | to side-or-corner, color-stop1, color-stop2, ...);
angle: 定義漸變角度（0deg-360deg，預設180deg）
side-or-corner: 指定線性漸變起始位置（順序隨意）
- 關鍵字一： 水平位置（left,right）
- 關鍵字而： 垂直位置（top,bottom）
color-stop1, color-stop2,...
- 指定漸變的起止顏色，由顏色值、停止位置（可選，使用百分比指定）組成
複製程式碼示例：
background: repeating-linear-gradient(red, yellow 10%, green 20%);
// 結果如下，預設自上而下，以及設定顏色的佔比
複製程式碼
示例：
background: repeating-linear-gradient(30deg, red 5%, yellow 10%, green 20%);
// 結果如下，設定角度後的效果
複製程式碼
歡迎關注 公眾號【小夭同學】
ES6入門系列
Git教程