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