大家一開始看到CSS3中 linear-gradient 屬性，都會直覺上認為只能拿來做為漸層的使用，但實際上 linear-gradient 的使用範圍非常廣，從漸層到色塊的使用，一直到 CSS 的繪圖都脫離不瞭它。讓我們一起來看看 CSS3 中不只是漸層的漸層吧！

1. 不只是漸層
的 漸層CSS3
PJCHENder 網頁前端資源站

2. 心理 程式 設計 分享

4. 先來看看漸層吧
PJCHENder 網頁前端資源站

5. to left
to top
to bottom
background-image:
linear-gradient(to right, #2C3E50 , #4CA1AF)

6. linear-gradient(to right, #2C3E50 0, #4CA1AF 100%)

7. 0 – 65% 純色 65% – 100% 漸層
linear-gradient(to right, #2C3E50 65%, #4CA1AF 100%)

8. 0 – 30% 純色 30% – 80% 漸層 80% –
100%
純色
linear-gradient(to right, #2C3E50 30%, #4CA1AF 80%)

9. 試試看更多顏色
PJCHENder 網頁前端資源站

10. linear-gradient(to right, #2C3E50 20%, #4CA1AF 65%, #FFE47A)
0 – 20%
純色
20% – 65%
漸層
65% – 100%
漸層

11. linear-gradient
(to right, #2C3E50 20%, #4CA1AF 45%, #4CA1AF 65%, #FFE47A);
0 – 20%
純色
20% – 45%
漸層
65% – 100%
漸層
45% – 65%
純色

12. 方向
PJCHENder 網頁前端資源站

14. linear-gradient(120deg, #2C3E50 , #FFE47A)

15. 不只是漸層的漸層
PJCHENder 網頁前端資源站

16. linear-gradient (135deg, #2C3E50 50%, #FFE47A 50%);
後者數值只要比前者小就會變成色塊

17. linear-gradient(
135deg,
#2C3E50 0,
#2C3E50 25%,
#4CA1AF 25%,
#4CA1AF 65%,
#FFE47A 65%
)

18. 圖層的應用
PJCHENder 網頁前端資源站

19. background-image:
linear-gradient(to right, #2C3E50 25%, transparent 0),
linear-gradient(to right, #4CA1AF 75%, transparent 0),
linear-gradient(to right, #FFE47A 100%, transparent 0);
後者數值只要比前者小就會變成色塊

20. background-image:
linear-gradient(135deg, #2C3E50 25%, transparent 0),
linear-gradient(135deg, #4CA1AF 75%, transparent 0),
linear-gradient(135deg, #FFE47A 100%, transparent 0);

21. 應用實例
PJCHENder 網頁前端資源站

27. From CSS Coke
linear-gradient(
-90deg,
#f33 45%,
#333 45%,
#3f3f3f 50%,
#333 55%,
#FFF 55%
);

28. From CSS Coke

29. 參考工具與資料
PJCHENder 網頁前端資源站

30. CSS for Decoration
本次分享的靈感來源，
歡迎大家直接透過網頁
下方的編輯欄位直接，
練習嘗試。

31. uiGradients
提供各式好看的漸層配色

32. CSS Coke
CSS 大師 AMOS 的個人網站
提供神奇寶貝球範例撰寫
歡迎前來大家一探究竟

33. 按讚追蹤最新實用的前端資源
資源 學習 分享
PJCHENder前端網頁資源站