收藏！經常使用的CSS函數~

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%);

結果以下，設置角度後的效果

本文使用 mdnice 排版