閱讀(6.9k) 書簽贊(2) 我要糾錯(cuò)

CSS3漸變

2018-06-07 17:07 更新

大綱

1. 緣起
2. 兼容性
3. 線性漸變
1. 3.1. 定義與語法
2. 3.2. 用法
  1. 3.2.1. 基本用法
  2. 3.2.2. 更多用法
4. 重復(fù)線性漸變
5. 徑向漸變
1. 5.1. 定義與語法
2. 5.2. 用法
  1. 5.2.1. 基本用法
  2. 5.2.2. 更多用法
6. 重復(fù)徑向漸變
7. 參考列表

??注意：由于CSS3中的部分內(nèi)容尚未完全定稿，所以本文的部分可能會(huì)隨時(shí)更新。

緣起

在之前的一篇文章CSS3背景中，我們有談到background-image屬性，此屬性用于設(shè)置元素的背景圖片，我們可以為之賦值一個(gè)圖片url，還可以使用CSS3提供的漸變（gradient）技術(shù)來設(shè)置一張漸變的純CSS背景。

CSS3支持的漸變可分為線性漸變（linear-gradient）、徑向漸變（radial-gradient）、重復(fù)線性漸變（repeating-linear-gradient）和重復(fù)徑向漸變（repeating-radial-gradient）。

兼容性

由于W3C官方組織尚未對漸變這一塊完全定稿，雖然主流的現(xiàn)代瀏覽器基本都已經(jīng)對漸變提供了支持，但是具體的實(shí)現(xiàn)細(xì)節(jié)可能不太一致，需要針對不同的瀏覽器內(nèi)核添加私有前綴。

下圖是摘自www.o2fo.com的瀏覽器兼容性圖表，可供參考。

線性漸變

定義與語法

什么叫線性漸變？

顏色沿著一條直線過渡，比如從左側(cè)到右側(cè)、從右側(cè)到左右、從頂部到底部、從底部到頂部、從左上角到右下角等等，簡單來說漸變方向是一條直線，此直線可以沿著任意軸。如果有過PS、flash等軟件或者設(shè)計(jì)經(jīng)驗(yàn)的話，應(yīng)該不難理解。

W3C規(guī)定的線性漸變語法如下，

background-image: linear-gradient(direction, color-start, ..., color-end);

即，linear-gradient包含如下幾個(gè)基本參數(shù)，

第一個(gè)參數(shù)為漸變方向
第二個(gè)參數(shù)為漸變起點(diǎn)
第三個(gè)參數(shù)為漸變終點(diǎn)

同時(shí)，你還可以在漸變起點(diǎn)和漸變終點(diǎn)中間插入任意多個(gè)色標(biāo)來達(dá)到多重顏色漸變的目的。

漸變方向

關(guān)于漸變方向，我們可以設(shè)置為一些常用關(guān)鍵詞，比如top、right、bottom、left，以及這四個(gè)基本關(guān)鍵詞的任意相鄰方向的兩兩組合，比如top left、top right等等。

漸變方向除了可以設(shè)置為常用關(guān)鍵詞之外，我們還可以設(shè)置一個(gè)角度值，即0deg～360deg。這個(gè)角度值也可以為負(fù)值。正負(fù)值的區(qū)別在于漸變方向相對于默認(rèn)值的方向是不同的。

??注意，此參數(shù)可以省略。當(dāng)漸變方向省略時(shí)，W3C規(guī)定的漸變方向默認(rèn)值為top，即漸變方向從上到下。

漸變起點(diǎn)

線性漸變的漸變起點(diǎn)其實(shí)是一個(gè)顏色值（后面說到的徑向漸變也有漸變起點(diǎn)的概念，但是此起點(diǎn)非彼起點(diǎn)），而且還可以包含一個(gè)長度值，此長度值可省略。長度值存在的含義是，可以對漸變起點(diǎn)進(jìn)行偏移。

漸變終點(diǎn)

漸變終點(diǎn)為一個(gè)顏色值，也可以包含一個(gè)長度值，此長度值可省略。長度值存在的含義是，可以對漸變終點(diǎn)進(jìn)行偏移。

值得一提的是，漸變終點(diǎn)的偏移效果與漸變起點(diǎn)的偏移效果是不一樣。欲知詳情，請繼續(xù)往下看????。

用法

基本用法

下面有一段示例，讓我們一起來體驗(yàn)一下（為了方便，css部分的代碼僅給出了webkit內(nèi)核的聲明）

<style>
div {
    width: 400px;
    height: 300px;
    border: 1px solid;
    margin-right: 15px;
    float: left;
}
.div1 {
    background-image: -webkit-linear-gradient(top, pink, green);
}
.div2 {
    background-image: -webkit-linear-gradient(top left, pink, green);
}
.div3 {
    background-image: -webkit-linear-gradient(45deg, pink, green);
}
</style>
<div class=“gradient div1”>
    -webkit-linear-gradient(top, pink, green);
</div>
<div class=“gradient div2”>
    -webkit-linear-gradient(bottom right, pink, green);
</div>
<div class=“gradient div3”>
    -webkit-linear-gradient(45deg, pink, green);
</div>

其效果如下圖所示，

重復(fù)線性漸變

我們可以使用repeating-linear-gradient來達(dá)到重復(fù)線性漸變的目的。所謂的重復(fù)線性漸變，就是沿著線性漸變線的兩個(gè)方向上無線延伸重復(fù)。在這里需要注意一點(diǎn)就是，我們在設(shè)置漸變色標(biāo)時(shí)應(yīng)該同時(shí)給出其偏移量，否則無法實(shí)現(xiàn)重復(fù)漸變的效果。

讓我們來看個(gè)簡單的例子，

.div1 {
    background-image: -webkit-repeating-linear-gradient(top left, pink 50px, green 100px);
}

其效果如下，

徑向漸變

定義與語法

什么叫徑向漸變？

不同于線性漸變，所謂的徑向漸變其實(shí)就是圓形或者橢圓形漸變，其顏色漸變的軌跡不再是沿著一條直線，而是從一個(gè)點(diǎn)開始，向所有方向進(jìn)行輻射。相對線性漸變要稍微復(fù)雜一些。

W3C規(guī)定的徑向漸變標(biāo)準(zhǔn)語法如下，

background-image: radial-gradient(center, shape size, start-color, ..., last-color);

所以，radial-gradient將包含如下幾個(gè)參數(shù)，

第一個(gè)參數(shù)為漸變起點(diǎn)
第二個(gè)參數(shù)為漸變形狀和漸變大小
第三個(gè)參數(shù)為漸變起點(diǎn)色標(biāo)
第四個(gè)參數(shù)為漸變終點(diǎn)色標(biāo)

我們可以在漸變起點(diǎn)色標(biāo)和漸變終點(diǎn)色標(biāo)之間插入任意多個(gè)漸變中間色標(biāo)。

漸變起點(diǎn)

所謂漸變起點(diǎn)即是徑向漸變的的開始坐標(biāo)。此參數(shù)可以使用常用的位置關(guān)鍵詞，比如top、right、bottom、left、center，或者是上右下左的兩兩相鄰組合。除此之外還可以賦值為類似background-position屬性的值，即使用長度坐標(biāo)或者百分比坐標(biāo)。

此參數(shù)的默認(rèn)值為center，且可以省略。

漸變形狀

shape定義了漸變形狀。徑向漸變只有兩種漸變形狀，一種是橢圓（ellipse）一種是圓形（circle）。其實(shí)圓形徑向漸變是一種特殊的橢圓徑向漸變，因?yàn)榇藭r(shí)徑向漸變的主半徑（major-radius）和次半徑（minor-radius）是相同的。

此參數(shù)的默認(rèn)值為ellipse，且可以省略。

漸變大小

size定義了漸變大小。其實(shí)此參數(shù)的本質(zhì)是設(shè)置徑向漸變的主漸變半徑和次漸變半徑。如下圖，

其中水平方向是主漸變半徑，垂直方向是次漸變半徑。當(dāng)主次半徑一致時(shí)既是圓形，不一致時(shí)既為橢圓。

與線性漸變中的長度值參數(shù)相似，我們可以為漸變大小size設(shè)置一個(gè)css允許的度量單位，如px、em等，也可以使用百分比（％）。除此之外，我們還可以設(shè)置一些特殊的關(guān)鍵詞，如下

closest-side，指定徑向漸變的半徑長度為從圓心到離圓心最近的邊
closest-corner，指定徑向漸變的半徑長度為從圓心到離圓心最近的角
farthest-side，指定徑向漸變的半徑長度為從圓心到離圓心最遠(yuǎn)的邊
farthest-corner，指定徑向漸變的半徑長度為從圓心到離圓心最遠(yuǎn)的角

當(dāng)然，我們可以對size不作任何自定義設(shè)置，此時(shí)的默認(rèn)值為farthest-corner。各個(gè)關(guān)鍵詞的效果如下圖，

??注意1：如果我們將漸變起點(diǎn)、漸變形狀及漸變大小這幾個(gè)參數(shù)都省略，既都采用默認(rèn)值，此時(shí)徑向漸變的最終形狀將根據(jù)容器的寬高來自動(dòng)計(jì)算確定。

??注意2：需要特別注意的是，漸變形狀和漸變大小（即shape和size）的本質(zhì)其實(shí)都是設(shè)置徑向漸變的最終形狀的，所以在某些時(shí)候這兩個(gè)參數(shù)可能不能同時(shí)設(shè)置。

比如有如下的css代碼，

background-image: -webkit-radial-gradient(center, circle 50px 100px, pink, green);

那么瀏覽器將不知道如何渲染，因?yàn)槟慵仍O(shè)置了關(guān)鍵詞circle，但是又同時(shí)設(shè)置了主半徑和次半徑，而且主次半徑還不相同。我們知道主次半徑不一致的結(jié)果將會(huì)呈現(xiàn)出一個(gè)橢圓，但是之前又明確設(shè)置了circle，此處將會(huì)有沖突。

漸變色標(biāo)

徑向漸變的色標(biāo)跟線性漸變的色標(biāo)類似。也有兩個(gè)關(guān)鍵的漸變色標(biāo)，一個(gè)是漸變起點(diǎn)色標(biāo)，一個(gè)是漸變終點(diǎn)色標(biāo)，且這兩個(gè)色標(biāo)都可以設(shè)置一個(gè)長度值（或者百分比）。

當(dāng)為漸變起點(diǎn)色標(biāo)設(shè)置長度（或者百分比）時(shí)，漸變起點(diǎn)將會(huì)發(fā)生偏移，偏移點(diǎn)為真正開始漸變的點(diǎn)。
當(dāng)為漸變終點(diǎn)色標(biāo)設(shè)置長度（或者百分比）時(shí)，漸變終點(diǎn)將會(huì)發(fā)生偏移，偏移點(diǎn)為真正終止?jié)u變的點(diǎn)。
可以在漸變起點(diǎn)色標(biāo)和漸變終點(diǎn)色標(biāo)之間插入任意多個(gè)色標(biāo)，來達(dá)到多色徑向漸變的目的。

用法

基本用法

下面有一段示例，讓我們一起來體驗(yàn)一下（為了方便，css部分的代碼僅給出了webkit內(nèi)核的聲明，下同）

<style>
.gradient {
    width: 400px;
    height: 400px;
    font-size: 10px;
    margin-right: 15px;
    float: left;
    border: 1px solid;
    text-align: center;
    line-height: 80px;
}
.div1 {
    background-image: -webkit-radial-gradient(pink, green);
}
.div2 {
    background-image: -webkit-radial-gradient(pink, green);
}
</style>
<div class=“gradient div1”>width: 400px; height: 400px;</div>
<div class=“gradient div2”>width: 400px; height: 200px;</div>

其效果如下圖，

這是徑向漸變最基本的使用方法，CSS代碼中我們僅設(shè)置了漸變色標(biāo)起點(diǎn)和漸變色標(biāo)終點(diǎn)，其他的參數(shù)都采用默認(rèn)值。從圖中可以看出，

漸變起點(diǎn)為容器的中心，漸變方向?yàn)橐云瘘c(diǎn)為中心向四周輻射。
漸變顏色從內(nèi)到外由粉色到綠色平滑過渡。
此時(shí)徑向漸變的最終形狀將由容器的大小確定。前一個(gè)容器的寬高一致，漸變形狀為圓形，后一個(gè)容器的寬高不一樣，漸變的形狀為橢圓形。

更多用法

上面我們已經(jīng)看到了徑向漸變的基本用法，下面我們針對不同的參數(shù)分別做一些示例。

示例1

首先我們來改變漸變起點(diǎn)，代碼如下（為了簡單這里僅給出了漸變相關(guān)的css代碼）

.div1 {
    background-image: -webkit-radial-gradient(center, pink, green);
}
.div2 {
    background-image: -webkit-radial-gradient(top, pink, green);
}
.div3 {
    background-image: -webkit-radial-gradient(top left, pink, green);
}
.div4 {
    background-image: -webkit-radial-gradient(33% 33%, pink, green);
}

效果如下，

從效果圖中，我們可以看出，

漸變起點(diǎn)是可以自定義的，且可以設(shè)置為關(guān)鍵字、長度值、百分比。
在沒有自定義漸變形狀參數(shù)的情況下，最終的漸變形狀受漸變起點(diǎn)和容器大小兩個(gè)因素影響。

示例2

其次，我們來改變徑向漸變的形狀或者大小參數(shù)，示例代碼如下，

.div1 {
    background-image: -webkit-radial-gradient(pink, green);
}
.div2 {
    background-image: -webkit-radial-gradient(center, circle, pink, green);
}
.div3 {
    background-image: -webkit-radial-gradient(center, 100px 100px, pink, green);
}
.div4 {
    background-image: -webkit-radial-gradient(center, 20% 40%, pink, green);
}

其效果如下，

從上面的效果圖中，我們可以看出，

漸變起點(diǎn)、漸變形狀、漸變大小這幾個(gè)參數(shù)都可以省略。他們的默認(rèn)值分別為：center，ellipse，auto。其中漸變大小在未設(shè)置的情況下，將根據(jù)漸變起點(diǎn)和容器的大小自動(dòng)計(jì)算。
漸變形狀的可選值有circle和ellipse。
漸變大小可以設(shè)置為長度單位或者百分比。
當(dāng)漸變大小手動(dòng)設(shè)置為長度單位或者百分比時(shí)，必須指定漸變起點(diǎn)，否則瀏覽器會(huì)將自定義值作為漸變起點(diǎn)來渲染。
漸變大小還可以使用默認(rèn)的關(guān)鍵詞（closest-side，closest-corner，farthest-side，farthest-corner）。此處效果圖中未作示例，可參閱漸變大小。

示例3

最后，類似線性漸變，我們在漸變起點(diǎn)色標(biāo)和漸變終點(diǎn)色標(biāo)中可以插入任意多個(gè)漸變色標(biāo)來得到多重徑向漸變的目的。示例如下，

.div1 {
    background-image: -webkit-radial-gradient(pink, blue, gold, green);
}
.div2 {
    background-image: -webkit-radial-gradient(pink 10%, blue 45%, gold 65%, green 80%);
}

其效果如下，

左邊的效果未自定義任何色標(biāo)偏移，右側(cè)自定義了色標(biāo)的偏移量。從圖中我們可以看出，

在第一個(gè)和最后一個(gè)色標(biāo)中間可以插入任意多個(gè)漸變色標(biāo)。
對每一個(gè)色標(biāo)都可以設(shè)置一個(gè)長度或者百分比，對漸變起點(diǎn)色標(biāo)（第一個(gè)色標(biāo)）和其他漸變色標(biāo)（除了第一個(gè)色標(biāo)之外）進(jìn)行偏移。
漸變起點(diǎn)色標(biāo)和其他色標(biāo)的偏移效果是不一致的。
對漸變起點(diǎn)色標(biāo)進(jìn)行偏移意味著偏移點(diǎn)才是真正的漸變起點(diǎn)。如上圖中的P1處，P1的內(nèi)部有部分容器（10%大?。┦菦]有漸變的。
對其他色標(biāo)進(jìn)行偏移意味著偏移點(diǎn)才是真正的漸變終點(diǎn)。如上圖中P2，P3，P4處。這三處位置在這里有兩層含義，
- 第一層含義是，此處是當(dāng)前色標(biāo)的漸變終點(diǎn)。比如P2位置處，它是blue顏色的漸變終點(diǎn)，理論上此處的顏色值取出來應(yīng)該是#00F。
- 第二層含義是，此處時(shí)當(dāng)前色標(biāo)與下一個(gè)漸變色標(biāo)的分割線。比如P3處，它是gold顏色和green顏色的分割線。（其實(shí)P2位置也是一個(gè)分割線）
如果對漸變終點(diǎn)色標(biāo)設(shè)置偏移，那么漸變終點(diǎn)將會(huì)提前終止，比如P4處。

重復(fù)徑向漸變

我們可以使用repeating-radial-gradient來達(dá)到重復(fù)徑向漸變的目的。與重復(fù)線性漸變一樣，我們在設(shè)置漸變色標(biāo)時(shí)需要同時(shí)給定偏移量，否則無法實(shí)現(xiàn)重復(fù)漸變的效果。

讓我們來看個(gè)簡單的例子，

.div1 {
    background-image: -webkit-repeating-radial-gradient(top left, pink 50px, green 100px);
}

其效果如下，

以上內(nèi)容是否對您有幫助：

← CSS3背景

CSS3陰影和反射 →

寫筆記

我要補(bǔ)充