柚子快報邀請碼778899分享：css3 【css】漸變效果
柚子快報邀請碼778899分享：css3 【css】漸變效果
css漸變效果
使用 CSS 漸變可以在兩種顏色間制造出平滑的漸變效果。
用它代替圖片，可以加快頁面的載入時間、減小帶寬占用。同時，因為漸變是由瀏覽器直接生成的，它在頁面縮放時的效果比圖片更好，因此你可以更加靈活、便捷的調(diào)整頁面布型
類型含義線性漸變linear-gradient指在一條直線上進行漸變徑向漸變radial-gradient是一種從起點到終點顏色從內(nèi)到外進行圓形漸變（從中間向外拉，像圓一樣）
一、線性漸變
創(chuàng)建一個線性漸變，至少定義兩種顏色節(jié)點。顏色節(jié)點即你想要呈現(xiàn)平穩(wěn)過渡的顏色。同時，你也可以設(shè)置一個起點和一個方向（或一個角度）。
語法
background: linear-gradient(direction, color1, color2, ...);
1、線性漸變 - 從上到下(to bottom)（默認情況下）/從下到上(to top)
background: linear-gradient(#e66465, #9198e5);//從上到下
background: linear-gradient(to top, #e66465, #9198e5);//從下到上
2、線性漸變 - 從左到右（to right）/從右到左(to left)
background: linear-gradient(to right, pink, skyblue)；
background: linear-gradient(to left, pink, skyblue)；
效果圖
3、線性漸變 - 對角
background: linear-gradient(to top right, rgb(238, 163, 175), rgb(149, 214, 240));
4、線性漸變 - 使用角度
如果你想要在漸變的方向上做更多的控制，你可以定義一個角度，而不用預(yù)定義方向（to bottom、to top、to right、to left、to bottom right，等等）
語法
background: linear-gradient(angle, color1, color2,...);
html代碼塊
css代碼塊
效果圖
5、重復(fù)的線性漸變
將線性漸變平鋪顯示
語法
background: repeating-linear-gradient(direction, color1, color2,...);
html代碼塊
css代碼塊
效果圖
補充：不均勻漸變百分比
百分比表示指定顏色的標準中心線位置，百分比之間是過渡色，如果百分比位置之間有重疊會失去漸變過渡色。
background: linear-gradient(red 10%, green 85%, blue 90%)
其中：
10% 表示 red 的顏色中心線在線性漸變方向的 10% 的位置。
85% 表示 green 的顏色中心線在線性漸變方向的 85% 的位置。
90% 表示 blue 的顏色中心線在線性漸變方向的 90% 的位置。
10% 到 85% 是 red-green 的過渡色，85%-90% 是 green-blue 的過渡色。
二、徑向漸變
創(chuàng)建一個徑向漸變，也必須至少定義兩種顏色節(jié)點。顏色節(jié)點即你想要呈現(xiàn)平穩(wěn)過渡的顏色。
同時，你也可以指定漸變的中心、形狀（圓形或橢圓形）、大小。默認情況下，漸變的中心是 center（表示在中心點），漸變的形狀是 ellipse（表示橢圓形），漸變的大小是 farthest-corner（表示到最遠的角落）。
語法
background-image: radial-gradient(shape size at position, start-color, ..., last-color);
參數(shù)含義默認值shape定義形狀（圓形或者橢圓）ellipse（表示橢圓形）注意：容器寬高不相等size定義大小farthest-corner（表示到最遠的角落）position定義圓心的位置center（表示在中心點）start-color定義開始的顏色值必填，無默認值last-color定義結(jié)束的顏色值必填，無默認值
1、普通徑向漸變
顏色節(jié)點均勻分布
顏色節(jié)點不均勻分布
background: radial-gradient(red 5%, yellow 15%, orange 60%)
2、自定義圓心位置
background: radial-gradient(at right top, red, yellow, orange)
/*使用 at 來定義最終的圓心位置 at后面可以接代表方向的關(guān)鍵字 也可以使用百分值
默認是先設(shè)置水平方向的位置 然后是垂直方向 這里就表示將圓心的位置定義在右上角
*/
3、自定義形狀、自定義圓心位置
background: radial-gradient(circle at 50% 50%, red, yellow, orange)
/*這里表示的就是創(chuàng)建一個圓形 且該圓形的圓心位于水平方向50% 垂直方向50%的位置
*/
4、自定義徑向大小
background: radial-gradient(100px 50px at 50% 50%, red, yellow, orange)
/*這里表示定義了一個水平半徑為150px 垂直半徑為110px 圓心的位置在水平方向50% 垂直方向50% 即居中顯示*/
注意：自定義徑向大小時，不能自定義形狀。
自定義大小，是改變水平和垂直兩個方向的半徑，只有當形狀是橢圓時，才能同時自定義水平和垂直方向的半徑，當形狀是圓時，只能調(diào)整一個方向的半徑?。?！
柚子快報邀請碼778899分享：css3 【css】漸變效果
推薦閱讀
本文內(nèi)容根據(jù)網(wǎng)絡(luò)資料整理，出于傳遞更多信息之目的，不代表金鑰匙跨境贊同其觀點和立場。
轉(zhuǎn)載請注明，如有侵權(quán)，聯(lián)系刪除。
Gittigidiyor跨境吉蒂購
