語法:linear-gradient(方向,顔色 位置,顔色 位置);
示例: background: linear-gradient(90deg,red 40%,yellow 50%,green 80%);
參數解析: 其中位置的百分比指的是顔色結束漸變的面積。
方向取值:top,bottom left等/0deg
(如果不寫方向默認為180deg/top),方向前面不要加to。
方向參數:【角度參數】
我們以紅色向黃色漸變為例子:
實際顯示圖片如下:
給出案例:提出兩個問題來理解角度
下圖描述紅色向綠色漸變過程,請注意兩個問題
第一:角度為何是負的,代表什麼含義?
第二:百分比代表什麼呢?
第三:角度永遠開始于漸變線,終止于水平線;順時針為負(有點反人類)
給出3個案例進一步理解角度問題
角度的正負其表現形式就是,漸變顔色的方向問題,就是從哪個顔色到哪個顔色的問題;
角度45 顔色A,顔色B, 實際效果我們從左向右閱讀(習慣問題,其實計算機解碼也是這個方向),就是先A這個顔色,然後再B這個顔色;
如果是負呢?角度-45 顔色A,顔色B,就是先B這個顔色,然後再A這個顔色;
位置參數,就是面積概念這個要理解透徹
案例:我們來看看一個30*30的棋盤案例
這個案例網上一大堆,我們今天進它的原理,原理不清楚啥也幹不了,請千萬不要抄代碼,而不懂原理,否則你是不會進步的的;
下面圖片的第一個紅框 請注意,任何複雜的圖片都是由簡單的可重複圖片構成,棋盤格就是由這個紅框重複組成的;
我們再思考一個問題?紅框如何組成的能? 一個白色背景,兩個黑色塊;我們重點關注兩個黑色塊如何完成,問題就解決了。
更多精彩资讯请关注tft每日頭條,我们将持续为您更新最新资讯!