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 

總結

以上是生活随笔為你收集整理的第七十九，CSS3背景渐变效果的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。