CSS3漸變

2018-06-07 17:07 更新

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

緣起

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

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

兼容性

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

下圖是摘自m.hgci.cn的瀏覽器兼容性圖表，可供參考。

線性漸變

定義與語法

什么叫線性漸變？

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

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


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

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

  • 第一個參數(shù)為漸變方向
  • 第二個參數(shù)為漸變起點
  • 第三個參數(shù)為漸變終點

同時，你還可以在漸變起點和漸變終點中間插入任意多個色標來達到多重顏色漸變的目的。

漸變方向

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

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

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

漸變起點

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

漸變終點

漸變終點為一個顏色值，也可以包含一個長度值，此長度值可省略。長度值存在的含義是，可以對漸變終點進行偏移。

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

用法

基本用法

下面有一段示例，讓我們一起來體驗一下（為了方便，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>

其效果如下圖所示，

更多用法

上面我們已經(jīng)看到了線性漸變的基本用法及其效果，下面我們來看一下針對不同參數(shù)進行不同賦值時的效果。

示例1

首先，我們來嘗試一下給漸變起點或者漸變終點設置一個長度值看看效果。代碼如下，


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

其效果如下，

從效果圖中可以看出，

  • 漸變起點和漸變終點的長度值可以設置為CSS允許的長度單位（比如px、em等），還可以設置為百分比（％）
  • 當給漸變起點設置長度時，漸變起點將會相對默認位置發(fā)生偏移。所設置的長度即為偏移值，而偏移點為真正開始漸變的起點
  • 當給漸變終點設置長度時，漸變終點也將會發(fā)生偏移，偏移點為真正的漸變終點
  • 當漸變方向即不是水平也不是垂直時（比如設置漸變方向為一角度值或者類似top left類似的值），偏移長度值與水平和垂直方向?qū)⒔M成一個三角形

示例2

其次，將漸變方向設置為一個角度值時，我們可以給出一個負值，比如


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

其效果如下，

所以，當我們給漸變方向設置為一角度值時，其實是改變了漸變方向。

??注意：此處在chrome（webkit內(nèi)核）的瀏覽器上有一個坑。當我們設置漸變方向為一角度值且此角度值為0deg或者360deg時，如果線性漸變表達式不帶上webkit的私有前綴-webkit的話，會得到不同的效果。如下圖，

此時得到的兩種效果其漸變方向卻是不一樣的。

至于原因，個人猜測可能是因為帶上-webkit-私有前綴時和W3C規(guī)定的兩種實現(xiàn)細節(jié)是不一樣的。

示例3

最后，我們可以在漸變起點和漸變終點之間插入任意多個色標，來達到多重顏色漸變的目的。比如，


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

其效果如下，

重復線性漸變

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

讓我們來看個簡單的例子，


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

其效果如下，

徑向漸變

定義與語法

什么叫徑向漸變？

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

W3C規(guī)定的徑向漸變標準語法如下，


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

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

  • 第一個參數(shù)為漸變起點
  • 第二個參數(shù)為漸變形狀和漸變大小
  • 第三個參數(shù)為漸變起點色標
  • 第四個參數(shù)為漸變終點色標

我們可以在漸變起點色標和漸變終點色標之間插入任意多個漸變中間色標。

漸變起點

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

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

漸變形狀

shape定義了漸變形狀。徑向漸變只有兩種漸變形狀，一種是橢圓（ellipse）一種是圓形（circle）。其實圓形徑向漸變是一種特殊的橢圓徑向漸變，因為此時徑向漸變的主半徑（major-radius）和次半徑（minor-radius）是相同的。

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

漸變大小

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

其中水平方向是主漸變半徑，垂直方向是次漸變半徑。當主次半徑一致時既是圓形，不一致時既為橢圓。

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

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

當然，我們可以對size不作任何自定義設置，此時的默認值為farthest-corner。各個關鍵詞的效果如下圖，

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

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

比如有如下的css代碼，


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

那么瀏覽器將不知道如何渲染，因為你既設置了關鍵詞circle，但是又同時設置了主半徑和次半徑，而且主次半徑還不相同。我們知道主次半徑不一致的結果將會呈現(xiàn)出一個橢圓，但是之前又明確設置了circle，此處將會有沖突。

漸變色標

徑向漸變的色標跟線性漸變的色標類似。也有兩個關鍵的漸變色標，一個是漸變起點色標，一個是漸變終點色標，且這兩個色標都可以設置一個長度值（或者百分比）。

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

用法

基本用法

下面有一段示例，讓我們一起來體驗一下（為了方便，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ù)都采用默認值。從圖中可以看出，

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

更多用法

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

示例1

首先我們來改變漸變起點，代碼如下（為了簡單這里僅給出了漸變相關的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);
}

效果如下，

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

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

示例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);
}

其效果如下，

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

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

示例3

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


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

其效果如下，

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

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

重復徑向漸變

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

讓我們來看個簡單的例子，


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

其效果如下，

參考列表


以上內(nèi)容是否對您有幫助：
在線筆記
App下載
App下載

掃描二維碼

下載編程獅App

公眾號
微信公眾號

編程獅公眾號