tft每日頭條

 > 生活

 > css怎麼設置漸變

css怎麼設置漸變

生活 更新时间:2025-05-16 05:29:40

語法:linear-gradient(方向,顔色 位置,顔色 位置); 示例: background: linear-gradient(90deg,red 40%,yellow 50%,green 80%); 參數解析: 其中位置的百分比指的是顔色結束漸變的面積。 方向取值:top,bottom left等/0deg (如果不寫方向默認為180deg/top),方向前面不要加to。

方向參數:【角度參數】

我們以紅色向黃色漸變為例子:

實際顯示圖片如下:

css怎麼設置漸變(css漸變講解)1

給出案例:提出兩個問題來理解角度

下圖描述紅色向綠色漸變過程,請注意兩個問題

第一:角度為何是負的,代表什麼含義?

第二:百分比代表什麼呢?

第三:角度永遠開始于漸變線,終止于水平線;順時針為負(有點反人類

css怎麼設置漸變(css漸變講解)2

給出3個案例進一步理解角度問題

角度的正負其表現形式就是,漸變顔色的方向問題,就是從哪個顔色到哪個顔色的問題;

角度45 顔色A,顔色B, 實際效果我們從左向右閱讀(習慣問題,其實計算機解碼也是這個方向),就是先A這個顔色,然後再B這個顔色;

如果是負呢?角度-45 顔色A,顔色B,就是先B這個顔色,然後再A這個顔色;

css怎麼設置漸變(css漸變講解)3

位置參數,就是面積概念這個要理解透徹

css怎麼設置漸變(css漸變講解)4

案例:我們來看看一個30*30的棋盤案例

這個案例網上一大堆,我們今天進它的原理,原理不清楚啥也幹不了,請千萬不要抄代碼,而不懂原理,否則你是不會進步的的;

下面圖片的第一個紅框 請注意,任何複雜的圖片都是由簡單的可重複圖片構成,棋盤格就是由這個紅框重複組成的;

我們再思考一個問題?紅框如何組成的能? 一個白色背景,兩個黑色塊;我們重點關注兩個黑色塊如何完成,問題就解決了。

css怎麼設置漸變(css漸變講解)5

css怎麼設置漸變(css漸變講解)6

css怎麼設置漸變(css漸變講解)7

,

更多精彩资讯请关注tft每日頭條,我们将持续为您更新最新资讯!

查看全部

相关生活资讯推荐

热门生活资讯推荐

网友关注

Copyright 2023-2025 - www.tftnews.com All Rights Reserved