本文小編為大家詳細(xì)介紹“CSS中如何實(shí)現(xiàn)線性漸變效果”，內(nèi)容詳細(xì)，步驟清晰，細(xì)節(jié)處理妥當(dāng)，希望這篇“CSS中如何實(shí)現(xiàn)線性漸變效果”文章能幫助大家解決疑惑，下面跟著小編的思路慢慢深入，一起來學(xué)習(xí)新知識(shí)吧。

創(chuàng)新互聯(lián)是專業(yè)的閔行網(wǎng)站建設(shè)公司，閔行接單;提供成都網(wǎng)站設(shè)計(jì)、網(wǎng)站制作,網(wǎng)頁設(shè)計(jì),網(wǎng)站設(shè)計(jì),建網(wǎng)站,PHP網(wǎng)站建設(shè)等專業(yè)做網(wǎng)站服務(wù);采用PHP框架,可快速的進(jìn)行閔行網(wǎng)站開發(fā)網(wǎng)頁制作和功能擴(kuò)展;專業(yè)做搜索引擎喜愛的網(wǎng)站,專業(yè)的做網(wǎng)站團(tuán)隊(duì),希望更多企業(yè)前來合作!

linear-gradient

1. 語法

linear-gradient([[to |],]? , [, ...]?)

-webkit-linear-gradient([[|],]? , [, ...]?)

這2種在使用方式和表現(xiàn)形式上都有所不同，使用direction時(shí)，前者要帶to, 后者不帶；使用angle時(shí)，表現(xiàn)不一致。

1）默認(rèn)

二者默認(rèn)都是從上到下

background-image:linear-gradient(#00ffff, #ff1493, #006699);
background-image:-webkit-linear-gradient(#00ffff, #ff1493, #006699)

2）: [left|right]|[top|bottom]的使用

二者表現(xiàn)方向相反

background-image:linear-gradient(to left, #00ffff, #ff1493, #006699);
background-image:-webkit-linear-gradient(left, #00ffff, #ff1493, #006699);

background-image:linear-gradient(to left top, #00ffff, #ff1493, #006699);
background-image:-webkit-linear-gradient(left top, #00ffff, #ff1493, #006699);

3）的使用

度數(shù)與方向的對(duì)應(yīng)關(guān)系。-webkit-與之對(duì)應(yīng)的方向則為450°-angle

background-image:linear-gradient(275deg, #ff1493, #000000, #006699);
background-image:-webkit-linear-gradient(175deg, #ff1493, #000000, #006699);

450°-175°=275°，所以二者表現(xiàn)一致，如下圖：

4） = 的使用

stop可使用百分比，也可以使用具體值，表示這種顏色在此位置達(dá)到飽和

background-image:linear-gradient(to right, #ff1493 10%, #000000 40%, #006699 60%);
background-image:-webkit-linear-gradient(to right, #ff1493 10%, #000000 40%, #006699 60%);

從上圖可以看出顏色變化過程：

0%  --> 10%: #ff1493一直處于飽和

10% --> 40%: #ff1493漸變?yōu)?code>#000000, 在40%處，#000000達(dá)到飽和

40% --> 60%: #000000漸變?yōu)?code>#006699, 在60%處，#006699達(dá)到飽和

60% --> 100%: #006699一直處于飽和

利用這一特性，可以繪制出條紋

  background-image:linear-gradient(to right, #ff1493 33%, #000000 33%, #000000 66%, #006699 66%);
  background-image:-webkit-linear-gradient(to right, #ff1493 33%, #000000 33%, #000000 66%, #006699 66%);

注：stop還可以同時(shí)設(shè)置2個(gè)值， 如linear-gradient(to right, #ff1493 0% 33%, #000000 33% 66%, #006699 66% 100%);-webkit-linear-gradient(to right, #ff1493 33%, #000000 33% 66%, #006699 66% 100%);，效果與上圖一致。

若后者的值小于前者，以前者為準(zhǔn)，如下20px小于60px，實(shí)際按60px顯示，效果如下圖：

background-image:linear-gradient(right, #ff1493 60px, #000000 20px);
background-image:-webkit-linear-gradient(right, #ff1493 60px, #000000 20px);

擴(kuò)展1：漸變中心

默認(rèn)是2種顏色的中心，但是我們可以設(shè)置其漸變中心

/* 3種顏色平分，漸變中心為1/3和2/3處 */
background-image:linear-gradient(to right, #ff1493, #000000, #006699); 
/* 漸變中心在10%和20%處 */
background-image:linear-gradient(to right, #ff1493, 10%, #000000, 20%, #006699);

注：-webkit-linear-gradient不支持此用法

擴(kuò)展2: repeating-linear-gradient

我們可以使用屬性這個(gè)繪制重復(fù)的色塊

background-image:repeating-linear-gradient(0deg, #ff1493, #000000 10px, #006699 20px);
background-image:-webkit-repeating-linear-gradient(0deg, #ff1493, #000000 10px, #006699 20px)

2、常用樣式

（1）多色星空

background-image:
    linear-gradient(45deg, rgba(255, 0, 76, 0.7), rgba(0, 0, 255, 0) 80%),
    linear-gradient(135deg, rgba(106, 0, 128, 1), rgba(0, 128, 0, 0) 80%),
    linear-gradient(225deg, rgba(0, 255, 255, 1), rgba(0, 255, 255, 0) 80%),
    linear-gradient(315deg, rgba(255, 192, 203, 0.7), rgba(255, 192, 203, 0) 80%);

同時(shí)設(shè)置多個(gè)值，讓整個(gè)背景色看起來比較絢麗

（2）格子圖案

background-image:
    repeating-linear-gradient(0deg, rgba(0, 255, 255, 0.3) 0px 5px, transparent 5px 10px),
    repeating-linear-gradient(90deg, rgba(0, 255, 255, 0.3) 0px 5px, transparent 5px 10px);
    
background-image:
    repeating-linear-gradient(45deg, rgba(0, 255, 255, 0.3) 0px 5px, transparent 5px 10px),
    repeating-linear-gradient(135deg, rgba(0, 255, 255, 0.3) 0px 5px, transparent 5px 10px);

利用顏色與透明色交替渲染

（3）邊框漸變