linear-gradient([| to ]?, )to bottom。而對於deg(角度)、rad(弧度)、grad(梯度)和turn(圈數)
所以，我們要實現乙個從上到下，從白漸變到黑的背景，其實只要寫：
.some-elementlinear-gradient的應用也不僅僅侷限於此，你可能看過以下這些樣式效果：
ps軟體中表徵透明背景的格仔背景
image
漂亮的進度條
以上這些樣式都可以用純css所實現，而起到關鍵作用的，便是linear-gradient了。而本文將深挖linear-gradient的細節，讓你在使用這個特性時，更成竹在胸。
所謂漸變容器，便是容納漸變圖案的填充範圍。它可以通過background-size和background-position來指定。如下圖所示：
穿過容器中心點、顏色停止點的線，稱為漸變線，如下圖所示：
穿過容器中心點的垂直線和漸變線之間的夾角，稱為漸變角，如下圖所示：
線性漸變的角度增強
需要注意的是，漸變線是一條線段，而非一條直線，因此它的長度是有限的。而漸變線的長度也是可求的，我們可以通過幾何關係，計算出漸變線的長度為：
abs(w * sin(a)) + abs(h * cos(a))w是漸變容器的寬，h是漸變容器的高，a是漸變角
我們通過linear-gradient的語法，所定義的中的每乙個成員其實就是漸變色節點，如下圖所示：
每個漸變色節點的語法是：
[| ]?顏色和位置引數所決定的，而這個位置引數可以是百分比也可以是長度數值，位置引數是相對於漸變線的。比如漸變線長度是100px，那麼對於#000 20%, #ccc 50px, #ddd 100%這樣的乙個漸變色節點列表，其各個漸變色節點所落在的位置分別是漸變線上的20px、50px、100px處。圖形渲染時，就將根據顏色和位置資訊，來進行漸變的渲染
漸變線上可以新增多個漸變節點，並且這些漸變節點是允許重合的，那麼當漸變節點重合時，會發生什麼狀況呢？
答案是：會形成清晰的分界比如：
linear-gradient(to bottom, #36c 0%, #36c 50%, #f00 50%, #f00 100%)在漸變色節點中，位置引數是可以預設的。那麼在預設的情況下，會怎樣決定位置引數呢？
節點位置會根據前乙個確定的位置和後乙個確定的位置，和中間節點總數，進行平均分配。如以下例子：
linear-gradient(100deg, red, orange, yellow 30%, red, black)0%、100%和指定的30%，因此，會進行如下的計算：
因此經過自動分配過後，相當於：
linear-gradient(100deg, red 0%, orange 15%, yellow 30%, red 65%, black 100%)節點位置時，是可以隨意寫而不考慮大小關係的，但其實節點位置應該符合單調遞增的關係。所以瀏覽器會自動進行糾正。其糾正邏輯為：
不正確的位置，會被糾正為與之前的明確指定的位置相同因此對於例子：
linear-gradient(80deg, red 30%, orange, yellow, blue 10%)分析如下：由於10%顯然小於30%，所以10%被糾正為30%，形成了：
linear-gradient(80deg, red 30%, orange, yellow, blue 30%)節點位置的自動分配的原則，red和blue之間的剩餘空間為0%，所以orange、yellow都將被忽略。從而實際上等同於：
linear-gradient(80deg, red 30%, blue 30%)深入理解C語言 深入理解指標
關於指標，其是c語言的重點，c語言學的好壞，其實就是指標學的好壞。其實指標並不複雜，學習指標，要正確的理解指標。指標也是一種變數，占有記憶體空間，用來儲存記憶體位址 指標就是告訴編譯器，開闢4個位元組的儲存空間 32位系統 無論是幾級指標都是一樣的 p操作記憶體 在指標宣告時，號表示所宣告的變數為指...
mysql 索引深入理解 深入理解MySql的索引
為什麼索引能提高查詢速度 先從 mysql的基本儲存結構說起 mysql的基本儲存結構是頁 記錄都存在頁裡邊 各個資料頁可以組成乙個雙向鍊錶每個資料頁中的記錄又可以組成乙個單向鍊錶 每個資料頁都會為儲存在它裡邊兒的記錄生成乙個頁目錄，在通過主鍵查詢某條記錄的時候可以在頁目錄中使用二分法快速定位到對應...
深入理解C語言 深入理解指標
關於指標，其是c語言的重點，c語言學的好壞，其實就是指標學的好壞。其實指標並不複雜，學習指標，要正確的理解指標。指標也是一種變數，占有記憶體空間，用來儲存記憶體位址 指標就是告訴編譯器，開闢4個位元組的儲存空間 32位系統 無論是幾級指標都是一樣的 p操作記憶體 在指標宣告時，號表示所宣告的變數為指...