建站
咨詢
售后
建站咨詢
新聞中心
CSS設(shè)置漸變色主要使用lineargradient和radialgradient兩種函數(shù)，這兩種函數(shù)都可以在元素的背景或者前景中創(chuàng)建線性或徑向的漸變色效果。
成都創(chuàng)新互聯(lián)公司主要從事成都網(wǎng)站設(shè)計、成都網(wǎng)站制作、網(wǎng)頁設(shè)計、企業(yè)做網(wǎng)站、公司建網(wǎng)站等業(yè)務(wù)。立足成都服務(wù)山丹,十多年網(wǎng)站建設(shè)經(jīng)驗,價格優(yōu)惠、服務(wù)專業(yè),歡迎來電咨詢建站服務(wù):13518219792
線性漸變（Linear Gradients）
lineargradient函數(shù)用于創(chuàng)建一個線性漸變，其基本語法如下：
background: lineargradient(direction, colorstop1, colorstop2, ...);
direction是一個角度，表示漸變的方向；colorstop是顏色停止點，可以是顏色名稱、十六進制顏色代碼或RGB顏色代碼。
以下代碼將在背景中創(chuàng)建一個從左到右由紅色漸變到藍色的效果：
background: lineargradient(to right, red, blue);
徑向漸變（Radial Gradients）
radialgradient函數(shù)用于創(chuàng)建一個徑向漸變，其基本語法如下：
background: radialgradient(shape size at position, startcolor, ..., lastcolor);
shape是形狀，可以是circle或ellipse；size是大小，可以是farthestcorner、farthestside、closestcorner、closestside或具體的長度；position是位置，可以是具體的坐標或關(guān)鍵字；startcolor和lastcolor是顏色停止點。
以下代碼將在背景中創(chuàng)建一個從中心向外由黃色漸變到藍色的圓形效果：
background: radialgradient(circle at center, yellow, blue);
使用多個漸變色
你可以在一個元素上同時使用多個漸變色，只需將每個漸變色的定義放在括號中，用逗號分隔即可。
以下代碼將在背景中創(chuàng)建一個從左到右由紅色漸變到藍色，然后從上到下由綠色漸變到黃色的效果：
background: lineargradient(to right, red, blue), lineargradient(to bottom, green, yellow);
以上就是CSS設(shè)置漸變色的詳細方法，希望對你有所幫助。
網(wǎng)站名稱：css如何設(shè)置漸變色
標題URL：http://m.5511xx.com/article/djespds.html
