柚子快報激活碼778899分享：前端 css的兩種漸變類型
柚子快報激活碼778899分享：前端 css的兩種漸變類型
一、css兩種漸變類型
1、線性漸變（向下/向上/向左/向右/對角線） 2、徑向漸變（中心向周圍展開）
二、格式
background-image:linear-gradient(方向/角度，顏色1，顏色2，顏色3...);
三、使用
通過屬性linear-gradient來這樣定義一個線性漸變。
（水平）從左邊開始的線性漸變。他從紅色開始，過渡到黃色：
background-image:linear-gradient(to right,#333399,#ff00cc);
（對角）從左上角開始（到右下角）的線性漸變。他從紅色開始過渡到黃色
background-image:linear-gradient(to bottom right,red,yellow);
使用透明度
CSS 漸變還支持透明度，也可用于創(chuàng)建漸變效果。
如需添加透明度，我們使用 rgba() 函數(shù)來定義色標(biāo)。 rgba() 函數(shù)中的最后一個參數(shù)可以是 0 到 1 的值，它定義顏色的透明度：0 表示全透明，1 表示全彩色（無透明）。
案例三：從左開始的線性漸變。它開始完全透明，然后過渡為全色紅色：
background-image:linear-gradient(to right, rgba(255,0,0,0),rgba(255,0,0,1));
其它方向角度
to top : 從下向上填充漸變色
to right:從左向右填充漸變色
to bottom:從上向下填充漸變
to left :從右向左填充漸變色
0deg : 0度->to top
90deg: 90度->to right
180deg:180度->to bottom
270deg:270度->to left加粗樣式
柚子快報激活碼778899分享：前端 css的兩種漸變類型
文章鏈接
本文內(nèi)容根據(jù)網(wǎng)絡(luò)資料整理，出于傳遞更多信息之目的，不代表金鑰匙跨境贊同其觀點(diǎn)和立場。
轉(zhuǎn)載請注明，如有侵權(quán)，聯(lián)系刪除。
Gmarket韓國購
