第七十九，CSS3背景漸變效果

CSS3背景漸變效果

 

學習要點：
1.線性漸變
2.徑向漸變

本章主要探討HTML5中CSS3背景漸變功能，主要有兩種漸變方式：線性漸變和徑向 （放射性）漸變。

 

一．線性漸變

linear-gradient背景顏色的漸變功能
CSS3提供了linear-gradient屬性實現背景顏色的漸變功能。在之前，這種效果必須採用圖片才能實現的。首先，咱們先看一下它的樣式表，以下：　　　　　　　　　　　　　

 

 linear-gradient(方位,起始色,末尾色)

                　　　　　　方位          可選參數，漸變的方位。可使用的值有：

                 　　　　　　　　　　　totop、to topright、to right、to bottom、to bottomleft、toleft、to top left。

 

           　　　　　　　起始色         必選參數，顏色值

 

           　　　　　　　末尾色         必選參數，顏色值

兩個必須參數

p{
    width: 200px;
    height: 100px;
    background-image: linear-gradient(#ffbe18, #138010);
}

<p>是一部由北青傳媒股份</p>

增長一個方位

p{
    width: 200px;
    height: 100px;
    background-image: linear-gradient( to top,#ffbe18, #138010);
}

<p>是一部由北青傳媒股份</p>

 

經過top、left、right、bottom這四組實現的漸變方向有時比較單一，咱們可使用以角度單位的數值來設置方位。好比 度（0deg）至關於totop；角度會沿逆時針方向隨着你的角度的增長而增長。

經過角度設置方位， ~ 36 度之間，能夠是負值

p{
    width: 200px;
    height: 100px;
    background-image: linear-gradient(45deg, #ffa500, #008000);
}

<p>是一部由北青傳媒股份</p>

 

多色線性漸變

 

p{
    width: 200px;
    height: 100px;
    background-image: linear-gradient(-45deg, #ffa500, #008000, #0000ff, #ff0000);
}

<p>是一部由北青傳媒股份</p>

 

 

經過百分比設置多色線性位置

p{
    width: 200px;
    height: 100px;
    background-image:linear-gradient(-45deg, #ffa500 0%, #008000 20%, #0000ff 40%, #ff0000 1%);
}

<p>是一部由北青傳媒股份</p>

 

默認狀況下：起始顏色的百分比位置是0%，末尾顏色的百分比位置是1 %，其餘位置按照平均值分配。也可使用px像素來設定，但計算麻煩點。 

結合背景，並使用透明漸變實現強大層次感

 

p{
    width: 200px;
    height: 100px;
    background-color: red;
    background-image: linear-gradient(to top right, rgba(0,0,0,0.6),rgba(0,0,0,0));
}

<p>是一部由北青傳媒股份</p>

重複漸變屬性值

p{
    width: 200px;
    height: 100px;
    background-image:repeating-linear-gradient(to top,orange 10px, green 30px);
}

<p>是一部由北青傳媒股份</p>

 目前最新的主流瀏覽器都支持CSS3的漸變屬性，那麼對於以前的瀏覽器支持度如何呢？能夠參考以下的表：

                        　　　　　　　　Opera    　　　　Firefox  　　　　Chrome       　　Safari     　　　  IE

     部分支持需帶前綴  　　　　　　11.5                  無        　　　　 4 ~ 9     　　     4 ~ 5       　　　  無

       支持需帶前綴             　　    無      　　　　   3.6 ~ 15 　　     1 ~ 25  　　　　 5.1~ 6           　 無

       支持不帶前綴           　　      12.1+               16+                  26+                    6.1+                 10.0+

這裏提到了部分支持，說明當時可能漸變還還沒有完善，但能夠經過添加前綴來使用它了。具體哪些沒完善，已經沒法考證了，版本太太久遠。那麼支持帶前綴和不支持帶前綴的完整 格式以下：

加上兼容前綴

p{
    background-image: -webkit-linear-gradient(to top, orange, green);
    background-image: -moz-linear-gradient(to top, orange, green);
    background-image: -o-linear-gradient(to top, orange, green);
    background-image: linear-gradient(to top, orange, green);
}

<p>是一部由北青傳媒股份</p>

repeating-linear-gradient屬性值和linear-gradient基本相同，不在贅述。 

 

二．徑向漸變

radial-gradient背景徑向漸變
CSS3提供了徑向漸變，也叫作放射性漸變：radial-gradient屬性值。它是從一個點向四周發散的方式擴展。屬性值樣式表以下：

radial-gradient(方位,起始色,末尾色)

             方位                  可選參數，徑向的方位。可使用的值有：像素、百分比、固定值，或複合搭配使用                    

           起始色                 必選參數，顏色值

           末尾色                 必選參數，顏色值

兩個必選參數

p{
    background-image: radial-gradient(orange, green);
}

<p>是一部由北青傳媒股份</p>

 

若是想設置第一個可選參數，有一種作法是設置爲：cirlce(圓形)或ellipse(橢圓形)。默認是橢圓形。

           形狀                   說明

           circle        　　   圓形

          ellipse        　　  橢圓形，默認值

p{
    background-image: radial-gradient(circle, orange, green);
}

<p>是一部由北青傳媒股份</p>

 

不僅僅能夠設置形狀，還能夠設置形狀的發散方向 

            方向                       說明

            top          　　   　  從頂部發散

            left         　　         從左側發散

           right         　　　　 從右側發散

           bottom        　　    從底部發散

           center        　　　  從中間發散

p{
    background-image: radial-gradient(circle at top, orange, green); 
}

<p>是一部由北青傳媒股份</p>

 

也能夠複合方向，好比右下方

p{
    background-image: radial-gradient(circle at right bottom, orange, green);
}

<p>是一部由北青傳媒股份</p>

 

能夠設置發散的距離，即圓的半徑長度 

         半徑關鍵字                   　　說明

       closest-side      　　　　指定徑向漸變的半徑長度爲從圓心到離圓心最近的邊

      closest-corner  　　　　 指定徑向漸變的半徑長度爲從圓心到離圓心最近的角

       farthest-side  　　　　  指定徑向漸變的半徑長度爲從圓心到離圓心最遠的邊

      farthest-corner 　　　　指定徑向漸變的半徑長度爲從圓心到離圓心最遠的角

p{
    background-image:radial-gradient(circle closest-side,orange,green);
}

<p>是一部由北青傳媒股份</p>

 

關鍵字有點拗口，能夠用像素表示半徑，但不接受百分比

p{
    background-image: radial-gradient(circle 50px, orange, green);
}

<p>是一部由北青傳媒股份</p>

 

一樣，也有重複背景方式

p{
    background-image: repeating-radial-gradient(circle 50px, orange, green);
}

<p>是一部由北青傳媒股份</p>

 

兼容模式 

p{
    background-image: -webkit-radial-gradient(circle,orange, green);
    background-image: -moz-radial-gradient(circle,orange, green);
    background-image: -o-radial-gradient(circle,orange, green);
    background-image: radial-gradient(circle, orange, green);
}

<p>是一部由北青傳媒股份</p>

 

兩個重複背景只要加上前綴就是兼容模式了 

background-image: -webkit-repeating-radial-gradient
background-image: -moz-repeating-radial-gradient
background-image: -o-repeating-radial-gradient
background-image: repeating-radial-gradient