以前共缕，我們要實(shí)現(xiàn)這種漸變洗出，可能要用 Photoshop 或 Fireworks 創(chuàng)建一個(gè)漸變圖形，然后使用 background-image 屬性把漸變圖形放在元素的背景中图谷。
現(xiàn)在翩活，CSS支持漸變背景阱洪，可以理解為Web瀏覽器即時(shí)創(chuàng)建的圖像。所以菠镇，漸變也使用常規(guī)的 background-image 屬性創(chuàng)建
線性漸變
background-image: linear-gradient( 角度 , 顏色);
線性漸變是最基本的漸變類型冗荸。這種漸變在一條直線上從一個(gè)顏色過渡到另一個(gè)顏色。
這條直線的方向由角度指定利耍，或者在關(guān)鍵字 to 后面加上 top蚌本、bottom、right隘梨、left 中的某一個(gè)關(guān)鍵字或多個(gè)關(guān)鍵字程癌，例如 to bottom left。
如上圖例子
CSS代碼：
body {
background-image: linear-gradient(to right , #7A88FF, #7AFFAF);
}
如果漸變是從元素上邊的紫色過度到下邊的綠色轴猎，要使用 to bottom 關(guān)鍵字嵌莉。
CSS代碼：
html, body {
width: 100%;
height: 100%;
}
body {
background-image: linear-gradient(to bottom , #7A88FF, #7AFFAF);
}
另外，還可以用 to bottom right 這樣的關(guān)鍵字指定漸變的角度税稼。使?jié)u變從元素的左上角開始烦秩，到元素的右下角結(jié)束。
CSS代碼：
html, body {
width: 100%;
height: 100%;
}
body {
background-image: linear-gradient(to bottom right, #7A88FF, #7AFFAF);
}
過渡所用的顏色可以使用CSS中任何一種顏色值郎仆，可參考【CSS】著色與透明
漸變方向也不局限于只能使用關(guān)鍵字只祠，還可以使用角度值指定漸變的方向。
角度值的寫法：
在0~360之間的數(shù)字后面加上deg扰肌，指定過渡在哪個(gè)方向結(jié)束抛寝。
例如， 0deg 表示元素的頂邊曙旭，所以過渡從底邊開始盗舰，到頂邊結(jié)束。
也就是說桂躏，
background-image: linear-gradient(to top, #7A88FF, #7AFFAF);
等價(jià)于：
background-image:linear-gradient(0deg, #7A88FF, #7AFFAF);
角度的值按順時(shí)針方向旋轉(zhuǎn)钻趋，因此，90deg 表示元素的右邊（與 to right 相同）剂习，180deg 表示元素的底邊（與 to bottom 相同）蛮位，270deg 表示元素的左邊（與 to left 相同）。
使用角度值時(shí)鳞绕，瀏覽器會(huì)繪制一條經(jīng)過元素中心點(diǎn)的假象線失仁。指定的角度就是這條線的角度，同時(shí)還指明過度在哪里結(jié)束们何。
CSS代碼：
html, body {
width: 100%;
height: 100%;
}
body{
background-image: linear-gradient(45deg, #7A88FF, #7AFFAF);
}
瀏覽器會(huì)繪制一條經(jīng)過元素中心點(diǎn)的假想線萄焦，指向45°刻度，因此冤竹，這個(gè)過渡從元素的左下角開始拂封，到右上角結(jié)束茬射。
這里推薦一個(gè)很好玩的網(wǎng)站：
https://codepen.io/thebabydino/full/qgoBL
色標(biāo)
可以根據(jù)需求添加任意多個(gè)顏色。額外添加的顏色叫色標(biāo)（color stop）烘苹。懂PS的對(duì)色標(biāo)就更容易理解了躲株。
添加色標(biāo)后片部，背景會(huì)從第一個(gè)顏色過渡到第二個(gè)顏色镣衡，再從第二個(gè)顏色過渡到第三個(gè)顏色，直到漸變的最后一個(gè)顏色為止档悠。
添加色標(biāo)：
CSS代碼：
html, body {
width: 100%;
height: 100%;
}
body{
background-image: linear-gradient(to right, black, white, black);
}
瀏覽器會(huì)平均分布各個(gè)顏色廊鸥。
最后，還可以在顏色后面再加一個(gè)值辖所，明確指明各色標(biāo)的位置惰说。
上圖的CSS代碼：
html, body {
width: 100%;
height: 100%;
}
body {
background-image: linear-gradient(to right, #E94E65, #15A892 20%, #A89215 80%, #1574A8);
}
背景色從左到右開始漸變，最左邊是玫紅缘回，在元素寬度20%的位置變成青色吆视，80%的位置變成黃色，最后是藍(lán)色酥宴。
色標(biāo)的位置不一定要用百分比啦吧，也可以用像素或者em值。不過百分比是最靈活的拙寡，會(huì)隨著元素的寬度或高度而變化授滓。
使用多色漸變時(shí)，第一個(gè)顏色和最后一個(gè)顏色無需指定位置肆糕，因?yàn)闉g覽器會(huì)嘉定第一個(gè)顏色從0%的位置開始般堆，最后一個(gè)顏色在100%的位置結(jié)束。
除非想把第一個(gè)顏色或最后一個(gè)顏色的位置放在指定的位置開始诚啃，才需要專門定位淮摔。
如：
CSS代碼：
html, body {
width: 100%;
height: 100%;
}
body {
background-image: linear-gradient(to right, #E94E65 20%, #15A892 40%, #A89215 60%, #1574A8 80%);
}
第一個(gè)顏色值（#E94E65）也有位置值（20%）。因此始赎，元素橫向前20%寬度的背景色是純粉紅色和橙。從20%的位置開始才由粉紅色變成青色。直到40%的位置完全結(jié)束粉紅色极阅。
此外胃碾，因?yàn)樵乜梢杂卸鄠€(gè)背景圖，所以也能有多個(gè)漸變背景筋搏。
CSS代碼：
html, body {
width: 100%;
height: 100%;
}
body {
background-image:
linear-gradient(to bottom, cyan, transparent),
linear-gradient(225deg, magenta, transparent),
linear-gradient(45deg, yellow, transparent);
}
在【CSS】同時(shí)使用多個(gè)背景圖這個(gè)筆記的最后有記到仆百，使用多個(gè)背景圖時(shí)，最先用到的背景圖會(huì)在最上層奔脐。
IE的支持程度
IE9及之前的版本都不支持漸變俄周。如果一定要使用漸變吁讨，要為IE9及之前的版本提供后備顏色。
CSS代碼：
html, body {
width: 100%;
height: 100%;
}
body {
background-color: #FC0;
background-image: linear-gradient(to bottom, #900, #FC0, #900);
}
IE9會(huì)應(yīng)用指定的背景色峦朗，因?yàn)椴恢С志€性漸變建丧，會(huì)跳過第二個(gè)聲明。其他瀏覽器會(huì)應(yīng)用背景色波势，還會(huì)創(chuàng)建漸變翎朱，漸變會(huì)覆蓋背景色。
如果使用的是RGBA顏色（RGBA顏色可見【CSS】著色與透明筆記）尺铣，設(shè)置了一定程度的透明度拴曲，且不想透過漸變看到背景色。此時(shí)可以使用簡寫的 background 屬性凛忿，覆蓋 background-color 屬性（這是簡寫的background屬性的一個(gè)比較怪異的行為澈灼，可見【CSS】背景基礎(chǔ)知識(shí)簡寫部分）。所以可以這樣寫店溢。
CSS代碼：
html, body {
width: 100%;
height: 100%;
}
body {
background-color: #FC0;
background: linear-gradient(to bottom, rgba(153, 0, 0, .5), #FC0, rgba(153, 0, 0, .5));
}
平鋪的線性漸變
background-image: repeating-linear-gradient();
平鋪的線性漸變其實(shí)就是在普通的漸變基礎(chǔ)上多了一個(gè)重復(fù)的效果叁熔。
平鋪的線性漸變定位色標(biāo)用的是像素值或者em值，這里百分比不是很好用床牧，至少我理解起來比較費(fèi)勁荣回。
先看效果圖
例1 CSS代碼：
html, body {
width: 100%;
height: 100%;
}
body {
background-image: repeating-linear-gradient(45deg, #66CC99 20px, #6666CC 30px, #66CC99 40px);
}
上面例1中，定義了漸變的角度叠赦，瀏覽器從左下角開始繪制漸變驹马，前20像素是綠色，此后直至30像素的位置過渡到紫色除秀，然后直至40像素的位置再過渡到綠色糯累。繪制完這個(gè)漸變后，瀏覽器會(huì)像平鋪圖像那樣把這個(gè)漸變鋪滿整個(gè)背景册踩。
例2 CSS代碼：
html, body {
width: 100%;
height: 100%;
}
body {
background-image: repeating-linear-gradient(45deg, #66CC99 20px, #6666CC 20px, #6666CC 30px, #66CC99 30px, #66CC99 40px);
}
注意例2中對(duì)色標(biāo)的定位泳姐。這樣設(shè)置色標(biāo)的位置，可以控制不同顏色在過渡中的強(qiáng)度暂吉。使得各個(gè)顏色過渡之間的邊界變得清晰胖秒，形成條紋效果。
徑向漸變
background-image: radial-gradient();
徑向漸變就是沿著圓周或者橢圓周向外擴(kuò)散的漸變慕的。
CSS代碼：
html, body {
width: 100%;
height: 100%;
}
body {
background-image: radial-gradient(#99CCCC, #7171B7);
}
上述代碼會(huì)在元素的顯示范圍內(nèi)創(chuàng)建一個(gè)橢圓形阎肝，把漸變的中心點(diǎn)（綠色）放在元素的中心上。
我們還可以在顏色值前面加上 circle 關(guān)鍵字肮街，創(chuàng)建圓形的漸變风题。
CSS代碼：
html, body {
width: 100%;
height: 100%;
}
body {
background-image: radial-gradient(circle,#99CCCC, #7171B7);
}
設(shè)置徑向漸變的中心點(diǎn)
可以用關(guān)鍵字 at 后面加上 background-position 屬性支持的定位關(guān)鍵字和數(shù)值，指定漸變中心的位置。
例如↓
CSS代碼：
html, body {
width: 100%;
height: 100%;
}
body {
background-image: radial-gradient(circle at 20% 20%, #99CCCC, #7171B7);
}
就把中心點(diǎn)設(shè)置在元素的左上方（20% 20%）沛硅。
closest-side：告訴瀏覽器從中心點(diǎn)向外擴(kuò)展?jié)u變眼刃，到離中心點(diǎn)最近的一邊結(jié)束。
CSS代碼：
html, body {
width: 100%;
height: 100%;
}
body {
background-image: radial-gradient(closest-side at 20% 20%, #99CCCC, #7171B7);
}
closest-corner：以離漸變中心點(diǎn)最近的元素頂角計(jì)算漸變的范圍摇肌。
CSS代碼：
html, body {
width: 100%;
height: 100%;
}
body {
background-image: radial-gradient(closest-corner at 20% 20%, #99CCCC, #7171B7);
}
farthest-side：以離漸變中心點(diǎn)最遠(yuǎn)的那一邊計(jì)算圓的半徑擂红。
CSS代碼：
html, body {
width: 100%;
height: 100%;
}
body {
background-image: radial-gradient(farthest-side at 20% 20%, #99CCCC, #7171B7);
}
farthest-corner：以離漸變中心點(diǎn)最遠(yuǎn)的頂角計(jì)算圓的半徑。
CSS代碼：
html, body {
width: 100%;
height: 100%;
}
body {
background-image: radial-gradient(farthest-corner at 20% 20%, #99CCCC, #7171B7);
}
色標(biāo)
和線性漸變一樣围小，徑向漸變也可以使用多個(gè)色標(biāo)昵骤。而且能設(shè)定各個(gè)色標(biāo)的位置。
CSS代碼：
html, body {
width: 100%;
height: 100%;
}
body {
background-image: radial-gradient(circle at 20% 40%,#99CCCC 20%, #7171B7 40%, #CCCC99 60%, #4F9C9C 80%);
}
設(shè)置顏色時(shí)吩抓，可以使用任何有效的CSS顏色值涉茧。可參考【CSS】著色與透明
IE的兼容性
與線性漸變一樣疹娶，IE9及之前的版本都不支持徑向漸變，解決方法和線性漸變一樣伦连。
平鋪的徑向漸變
background-image: repeating-radial-gradient();
原理和前面講到平鋪的線性漸變一樣雨饺。
例1 CSS代碼：
html, body {
width: 100%;
height: 100%;
}
body {
background-image: repeating-radial-gradient(circle at 20% 40%,#99CCCC 20px, #7171B7 40px, #CCCC99 60px, #4F9C9C 80px, #99CCCC 100px);
}
例2 CSS代碼：
html, body {
width: 100%;
height: 100%;
}
body {
background-image: repeating-radial-gradient(circle at 20% 40%,#99CCCC 20px, #7171B7 20px, #7171B7 40px, #CCCC99 40px, #CCCC99 60px, #4F9C9C 60px, #4F9C9C 80px, #99CCCC 80px, #99CCCC 100px);
}
注意：
為了讓平鋪的徑向漸變看起來比較流暢，結(jié)束顏色應(yīng)該與起始顏色相同惑淳。這樣能讓顏色自然地回歸最初的顏色额港。
因?yàn)閃eb瀏覽器會(huì)把線性漸變和徑向漸變當(dāng)成背景圖，所以可以使用控制背景圖的其他屬性歧焦，比如background-size移斩、background-position等。
HTML與CSS 目錄：HTML與CSS
