本來(lái)想先瞎扯些什么，然后又不知道講什么的好，那就直接進(jìn)入正題吧。

參考資料：

Using CSS gradients??(以及該頁(yè)面內(nèi)的大部分鏈接頁(yè)面的資料)

首先區(qū)分下，平常給的純色background，指的是background-color屬性，而漸變色所指向的是background-image屬性，是作為背景圖像處理的。

從漸變的形式分為2種：線性漸變(直線擴(kuò)散)和徑向漸變(從圓心擴(kuò)散)。

線性漸變： linear-gradient | repeating-linear-gradient

徑向漸變： radial-gradient | repeating-radial-gradient

線性漸變

語(yǔ)法格式：

linear-gradient( [ <angle/*角度*/> | to <side-or-corner>/*方向*/ ,]? <color-stop/*漸變開(kāi)始的顏色*/> [, <color-stop>]+/*漸變結(jié)束的顏色，開(kāi)始-結(jié)束的區(qū)間內(nèi)包含漸變涉及到的顏色列表*/ ) <side-or-corner> = [left | right] || [top | bottom] <color-stop> = <color> [ <percentage/*當(dāng)前漸變色所占百分比*/> | <length/*當(dāng)前漸變色起始位置，也代表上一個(gè)顏色漸變結(jié)束的位置*/> ]

使用代碼及效果圖

<div class="test"></div>

兩種顏色的漸變

<style> /*此例由黑色漸變至紅色*/.test{width:300px;height: 100px;background-image: linear-gradient(black, red); /*默認(rèn)是從上到下的漸變*//*background-image: linear-gradient(to top, black, red);*/ /*從下到上的漸變*//*background-image: linear-gradient(to right, black, red);*/ /*從左到右的漸變*//*background-image: linear-gradient(to left, black, red);*/ /*從右到左的漸變*/} </style>

效果圖如下：
?

三種及多種顏色的漸變

<style> /*此例由黑色漸變至紅色再至黃色*/.test{width:300px;height: 100px;background-image: linear-gradient(black, red, yellow); /*從上到下*//*background-image: linear-gradient(to top, black, red, yellow);*/ /*從下到上*//*background-image: linear-gradient(to right, black, red, yellow);*/ /*從左到右*//*background-image: linear-gradient(to left, black, red, yellow);*/ /*從右到左*/}/*... 按此規(guī)則依次加顏色列表，實(shí)現(xiàn)多色漸變*/ </style>

效果圖如下：

漸變距離的控制

<style>.test{width:300px;height: 100px;background-image: linear-gradient(to right, black 5px, red 60px, yellow 100px, purple 300px);} </style>

效果圖如下：

給漸變色加了位置值所代表的含義：

1. div[class="test"]背景色執(zhí)行從左到右的漸變

2. 0px-5px為黑色

3. 5px-60px為黑色向紅色的漸變

4. 60px-100px為紅色向黃色的漸變

5. 100px-300px為黃色向紫色的漸變

每?jī)煞N顏色之間的漸變的距離為位置差。

如果后一個(gè)顏色的起始位置的值小于前一個(gè)顏色的起始位置的值，則這兩種顏色的漸變距離為0，變成直接的顏色變化。
最后一個(gè)顏色可不設(shè)置起始位置的值，默認(rèn)漸變至總長(zhǎng)度(這里指div寬度)的末尾。如果最后一個(gè)顏色起始位置的值小于總長(zhǎng)度的值，則從該值開(kāi)始至總長(zhǎng)度的末尾由該顏色值純色填充。

使用百分比：

<style>.test{width:300px;height: 100px;background-image: linear-gradient(to right, black 10%, red 30%, yellow 50%, purple 100%);} </style>

解釋同上。

不同角度的漸變

以上案例都是以<side-or-corner>決定漸變方向，使用<angle>便可以根據(jù)自己喜好定義方向了。

在webkit內(nèi)核的deg

?

正常模式(指的是沒(méi)規(guī)定瀏覽器內(nèi)核的樣式)deg?

angle的角度值與上圖的角度值所指方向一致。

<style> /*這里以標(biāo)準(zhǔn)的為例*/.test{width:300px;height: 100px;background-image: linear-gradient(0deg, black, red); /*從下至上*//*background-image: linear-gradient(45deg, black, red);*/ /*從左下角至右上角*//*background-image: linear-gradient(90deg, black, red);*/ /*從左至右*//*background-image: linear-gradient(135deg, black, red);*/ /*從左上角至右下角*//*background-image: linear-gradient(180deg, black, red);*/ /*從上至下*//*background-image: linear-gradient(225deg, black, red);*/ /*從右上角至左下角*//*background-image: linear-gradient(270deg, black, red);*/ /*從右至左*//*background-image: linear-gradient(315deg, black, red);*/ /*從右下角至左上角*/} </style>

徑向漸變

語(yǔ)法格式：

radial-gradient( [ circle/*圓*/ || <length>/*半徑大小*/ ] [ at <position>/*圓心所在位置*/ ]? ,| [ ellipse/*橢圓*/ || [<length> | <percentage> ]{2}]/*百分比*/ [ at <position>/*圓心所在位置*/ ]? ,| [ [ circle | ellipse ]/*圓or橢圓*/ || <extent-keyword>/*橢圓離(最近，最遠(yuǎn))邊或角的距離*/ ] [ at <position>/*圓心所在位置*/ ]? ,| at <position> ,<color-stop> [ , <color-stop> ]+/*漸變顏色列表及位置*/ ) <extent-keyword> = closest-corner | closest-side | farthest-corner | farthest-side <color-stop> = <color> [ <percentage> | <length> ]

使用代碼及效果圖

<div class="test"></div>

圓

<style>.test{width: 300px;height: 100px;background-image: radial-gradient(50px at 50% 50% , white 0%, red 50%, purple 99%, transparent 99%);} </style>

以上代碼的圓心在元素的中心點(diǎn)(50% 50%)，半徑為50px,圓心白色，圓心至半徑50%處由白色漸變至紅色，又從半徑50%處至99%處紅色漸變至紫色，從半徑長(zhǎng)度的99%至99%由紫色漸變透明。

注意：transparent 99%(或0%-99%)是為圓規(guī)定在99%之后至100%的背景色為透明，如果除去這個(gè)設(shè)置，那剩余部分將會(huì)被前一個(gè)背景色填充，當(dāng)然，現(xiàn)在這個(gè)值在這里是99%，在其他地方也可以是其他值，根據(jù)上一個(gè)顏色的相對(duì)圓心的距離確定范圍。

橢圓

<style>.test{width: 300px;height: 100px;border: 1px solid black;background-image: radial-gradient( ellipse farthest-corner at 30% 30% , white 0%, red 20%, purple 30%, transparent 30%);} </style>

首先，選擇圓的類型是ellipse，然后選擇extent-keyword來(lái)確定橢圓的規(guī)格(farthest-corner)，然后at position確定圓心所在位置(30% 30%)，之后日常的漸變顏色列表及漸變范圍。

效果圖如下：

分析下extent-keyword：

closest-side： 以靠近圓心的最近的一條邊為基準(zhǔn)來(lái)規(guī)定橢圓的大小。

closest-corner：以靠近圓心的最近的一個(gè)角(橢圓所在元素的角)為基準(zhǔn)來(lái)規(guī)定橢圓的大小。

farthest-side：以靠近圓心的最遠(yuǎn)的一條邊為基準(zhǔn)來(lái)規(guī)定橢圓的大小。

farthest-corner：以靠近圓心的最遠(yuǎn)的一個(gè)角(橢圓所在元素的角)為基準(zhǔn)來(lái)規(guī)定橢圓的大小。

以上圖為例，規(guī)定的是farthest-corner，這時(shí)候最遠(yuǎn)的角是div的點(diǎn)D所在的角(最近的角是點(diǎn)A所在位置的角，最近的邊是AB邊，最遠(yuǎn)的邊是BD邊)，且橢圓為30%的規(guī)格，圓心是點(diǎn)O，OF：OD = 3：10，所謂的30%便是這么得來(lái)的(當(dāng)然，也可以是像素規(guī)定)。

...其余規(guī)則以此類推...

漸變的repeat

線性repeat

語(yǔ)法格式：

repeating-linear-gradient( [ <angle>/*角度*/ | to <side-or-corner>/*方向*/ ,]? <color-stop> [, <color-stop>]+/*漸變顏色列表*/ ) <side-or-corner> = [left | right] || [top | bottom] <color-stop> = <color> [ <percentage> | <length> ]

案例：

<style>.test{width: 300px;height: 100px;border: 1px solid black;background-image: repeating-linear-gradient(180deg, transparent, transparent 5px, black 5px, black 10px),repeating-linear-gradient(90deg, transparent, transparent 5px, black 5px, black 10px);} </style>

效果圖如下：

repeating-linear-gradient也可重復(fù)使用

<style>.test{width: 300px;height: 100px;border: 1px solid black;background-image: repeating-linear-gradient(180deg, transparent, transparent 5px, black 5px, black 6px),repeating-linear-gradient(90deg, transparent, transparent 5px, black 5px, black 6px);} </style>

效果圖如下：

角度和方向可根據(jù)各自需求選擇。

當(dāng)然，有了線性的repeat，徑向也不會(huì)示弱，來(lái)看看徑向的repeat的吧。

語(yǔ)法格式：

repeating-radial-gradient( [[ circle/*圓*/ || <length>/*半徑*/ ] [at <position>]?/*位置*/ , | [ ellipse/*橢圓*/ || [<length> | <percentage> ]{2}] [at <position>]? , |[[ circle | ellipse ] || <extent-keyword> ] [at <position>]? , |at <position> , <color-stop> [ , <color-stop> ]+ ) <extent-keyword> = closest-corner | closest-side | farthest-corner | farthest-side <color-stop> = <color> [ <percentage> | <length> ]

這個(gè)是圓的：

<style>.test{width: 300px;height: 100px;border: 1px solid black;background-image: repeating-radial-gradient(circle, black, black 5px, white 5px, white 10px);} </style>

效果圖如下：

這個(gè)是橢圓的：

<style>.test{width: 300px;height: 100px;border: 1px solid black;background-image: repeating-radial-gradient(ellipse, black, black 5px, white 5px, white 10px);} </style>

效果圖如下：

暫時(shí)就寫(xiě)這些吧，具體的運(yùn)用看各自設(shè)計(jì)圖給的是什么樣的~ 也是懶得每個(gè)效果都切圖... ?

同時(shí)，歡迎大家共同交流討論各種技術(shù)問(wèn)題~

總結(jié)

以上是生活随笔為你收集整理的css3 背景渐变的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。