CSS3魔法堂：背景漸變（Gradient） - fsjohnhuang－IT工程師數位筆記本

文章出處

一、前言　　　　　　　　　　　　　　　　　　　　　　　　　　　　

很久之前就了解過CSS3的線性漸變（Linear-Gradient），這段時間決定進一步認知這一特性，以下筆記以便日后查閱。

二、CSS3的各種背景漸變　　　　　　　　　　　　　　　　　　　　

1. 線性漸變

示例——七彩虹

代碼：

<style type="text/css">
.rainbow-linear-gradient{
    width: 460px;
    height: 160px;

    background-image: -webkit-linear-gradient(left,#E50743 0%, #F9870F 15%, #E8ED30 30%, #3FA62E 45%,#3BB4D7 60%,#2F4D9E 75%,#71378A 80%);  
    background-image: -moz-linear-gradient(left,#E50743 0%, #F9870F 15%, #E8ED30 30%, #3FA62E 45%,#3BB4D7 60%,#2F4D9E 75%,#71378A 80%); 
    background-image: -o-linear-gradient(left,#E50743 0%, #F9870F 15%, #E8ED30 30%, #3FA62E 45%,#3BB4D7 60%,#2F4D9E 75%,#71378A 80%); 
    background-image: -ms-linear-gradient(left,#E50743 0%, #F9870F 15%, #E8ED30 30%, #3FA62E 45%,#3BB4D7 60%,#2F4D9E 75%,#71378A 80%);  
    background-image: linear-gradient(left,#E50743 0%, #F9870F 15%, #E8ED30 30%, #3FA62E 45%,#3BB4D7 60%,#2F4D9E 75%,#71378A 80%);  
}
</style>
<div class="rainbow-linear-gradient"></div>

樣式屬性： linear-gradient(起始角度, color stop, color stop[, color stop]*)

起始角度 ，用于設置線性漸變效果的起始角度，值為角度數或預設值。角度數的取值范圍是0~365deg，預設值（默認值為top）的取值范圍是[left,right,top,bottom,center,top right,top left,bottom left,bottom right,left center,right center]。（注意：IE10只能取[left,top]，Chrome則沒有[center,left center,right center]）。

color stop ，用于設置顏色邊界，color為邊界的顏色；stop為該邊界的位置，stop的值為像素數值或百分比數值，若為百分比且小于0%或大于100%則表示該邊界位于可視區域外。兩個 color stop 之間的區域為顏色過渡區，顏色將從靠左的邊界的顏色線性漸變為靠右的邊界的顏色。

2. 放射性漸變

示例——七彩虹球

代碼：

<style type="text/css">
.rainbow-radial-gradient{
    width: 160px;
    height: 160px;

    background-image: -webkit-radial-gradient(center,#E50743 0%, #F9870F 15%, #E8ED30 30%, #3FA62E 45%,#3BB4D7 60%,#2F4D9E 75%,#71378A 80%);  
    background-image: -moz-radial-gradient(center,#E50743 0%, #F9870F 15%, #E8ED30 30%, #3FA62E 45%,#3BB4D7 60%,#2F4D9E 75%,#71378A 80%); 
    background-image: -o-radial-gradient(center,#E50743 0%, #F9870F 15%, #E8ED30 30%, #3FA62E 45%,#3BB4D7 60%,#2F4D9E 75%,#71378A 80%); 
    background-image: -ms-radial-gradient(center,#E50743 0%, #F9870F 15%, #E8ED30 30%, #3FA62E 45%,#3BB4D7 60%,#2F4D9E 75%,#71378A 80%);  
    background-image: radial-gradient(center,#E50743 0%, #F9870F 15%, #E8ED30 30%, #3FA62E 45%,#3BB4D7 60%,#2F4D9E 75%,#71378A 80%);  
}
</style>
<div class="rainbow-radial-gradient"></div>

樣式屬性： radial-gradient(圓心坐標, 漸變形狀漸變大小, color stop, color stop[, color stop]*)

圓心坐標 ，用于設置放射的圓形坐標，可設置為形如10px 20px的 x-offset y-offset ，或使用預設值center（默認值）。

漸變形狀 ，取值范圍為預設值circle（圓形）和ellipse（橢圓形，默認值）。

漸變大小 ，取值范圍為如下預設值

　　　　　　　　 closest-side 或 contain ，以距離圓心最近的邊的距離作為漸變半徑。

　　　　　　　 closest-corner ，以距離圓心最近的角的距離作為漸變半徑。

　　　　　　 farthest-side ，以距離圓心最遠的邊的距離作為漸變半徑。

　　　　　　　　 farthest-corner 或 cover ，以距離圓心最遠的角的距離作為漸變半徑。

3. 重復線性漸變

　　示例——重復的彩虹　　

代碼：

<style type="text/css">
 .rainbow-repeating-linear-gradient{
    width: 460px;
    height: 160px;

    background-image: -webkit-repeating-linear-gradient(left,#E50743 0%, #F9870F 5%, #E8ED30 10%, #3FA62E 15%,#3BB4D7 20%,#2F4D9E 25%,#71378A 30%);  
    background-image: -moz-repeating-linear-gradient(left,#E50743 0%, #F9870F 5%, #E8ED30 10%, #3FA62E 15%,#3BB4D7 20%,#2F4D9E 25%,#71378A 30%); 
    background-image: -o-repeating-linear-gradient(left,#E50743 0%, #F9870F 5%, #E8ED30 10%, #3FA62E 15%,#3BB4D7 20%,#2F4D9E 25%,#71378A 30%); 
    background-image: -ms-repeating-linear-gradient(left,#E50743 0%, #F9870F 5%, #E8ED30 10%, #3FA62E 15%,#3BB4D7 20%,#2F4D9E 25%,#71378A 30%);  
    background-image: repeating-linear-gradient(left,#E50743 0%, #F9870F 5%, #E8ED30 10%, #3FA62E 15%,#3BB4D7 20%,#2F4D9E 25%,#71378A 30%);  
}
</style>
<div class="rainbow-repeating-linear-gradient"></div>

樣式屬性： repeating-linear-gradient(起始角度, color stop, color stop[, color stop]*)

各配置項的意思和取值規范均與linear-gradient一樣。唯一區別在于最后一個colo stop所配置的顏色并不會作為元素剩余部分的背景色，而是不斷重復整個線性漸變處理。

4. 重復放射性漸變

示例——重復的彩虹球

代碼：

<style type="text/css">
.rainbow-repeating-radial-gradient{
    width: 160px;
    height: 160px;

    background-image: -webkit-repeating-radial-gradient(center,#E50743 0%, #F9870F 5%, #E8ED30 10%, #3FA62E 15%,#3BB4D7 20%,#2F4D9E 25%,#71378A 30%);  
    background-image: -moz-repeating-radial-gradient(center,#E50743 0%, #F9870F 5%, #E8ED30 10%, #3FA62E 15%,#3BB4D7 20%,#2F4D9E 25%,#71378A 30%); 
    background-image: -o-repeating-radial-gradient(center,#E50743 0%, #F9870F 5%, #E8ED30 10%, #3FA62E 15%,#3BB4D7 20%,#2F4D9E 25%,#71378A 30%); 
    background-image: -ms-repeating-radial-gradient(center,#E50743 0%, #F9870F 5%, #E8ED30 10%, #3FA62E 15%,#3BB4D7 20%,#2F4D9E 25%,#71378A 30%);  
    background-image: repeating-radial-gradient(center,#E50743 0%, #F9870F 5%, #E8ED30 10%, #3FA62E 15%,#3BB4D7 20%,#2F4D9E 25%,#71378A 30%);  
}
</style>
<div class="rainbow-repeating-radial-gradient"></div>

樣式屬性： repeating-radial-gradient(圓心坐標, 漸變形狀漸變大小, color stop, color stop[, color stop]*)

　　　各配置項的意思和取值規范均與radial-gradient一樣。

5. 背景漸變模式

將上述四種漸變效果混合就可以創造各種背景漸變模式了！國外CSS高手的設計：http://lea.verou.me/css3patterns/

示例

代碼：

<style type="text/css">
.bg{
  width: 260px;
  height: 260px;
  
  /* 設置多個漸變背景圖， 使用逗號分隔 */
  background-image:
      radial-gradient(transparent 10%, #ccc 15%, #ccc 20%, transparent 100%),
      radial-gradient(35px 35px, transparent 10%, #aaa 15%, #aaa 20%, transparent 100%);
  background-color: #eee;
  background-size: 60px 60px,80px 80px;
</style>
<div class="bg"></div>

這里用到CSS3的新特性——Multiple Background Image和background-size屬性。

三、IE5.5~9的背景漸變　　　　　　　　　　　　　　　　　　　　

由于IE5.5~9不支持CSS3的漸變特性，因此需要使用IE濾鏡進行處理，而且IE的漸變濾鏡僅提供從left到right，和從top到bottom的線性漸變效果，并且只能是設置為兩種顏色的過渡效果而已。

濾鏡格式： filter:progid:DXImageTransfer.Microsoft.gradient([startcolorstr='起始顏色'|startcolor=起始顏色數值],[endcolorstr='結束顏色'|endcolor=結束顏色數值],GradientType=漸變類型)

GradientType ，取值范圍——0（默認值，表示從top到bottom漸變），1（表示從left到right漸變）。

startcolor 和 endcolor ，值為十進制的整數，取值范圍0~4294967295（由startcolorstr和endcolorstr的十六進制值轉換而來）。

startcolorstr 和 endcolorstr ，值格式為#AARRGGBB，其中AA為透明度的十六進制表示形式，其余則為RGB的十六進制表示形式，endcolorstr的默認值為#FF000000，startcolorstr的默認值為#FF0000FF。

四、SVG的背景漸變　　　　　　　　　　　　　　　　　　　　　

SVG可謂是我最期待的新特性。下面了解一下SVG下的背景漸變。

線性漸變示例——彩虹

代碼：

<?xml version="1.0"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg  width="100%" height="100%" version="1.1" xmlns="http://www.w3.org/2000/svg">
    <defs>
        <linearGradient id="linear-gradient" x1="0%" y1="0%" x2="100%" y2="0%">
                <stop offset="0%" style="stop-color:#E50743;"/>
                <stop offset="15%" style="stop-color:#F9870F;"/>
                <stop offset="30%" style="stop-color:#E8ED30;"/>
                <stop offset="45%" style="stop-color:#3FA62E;"/>
                <stop offset="60%" style="stop-color:#3BB4D7;"/>
                <stop offset="75%" style="stop-color:#2F4D9E;"/>
                <stop offset="80%" style="stop-color:#71378A;"/>
        </linearGradient>
    </defs>
    <ellipse cx="90" cy="60" rx="85" ry="55" style="fill:url(#linear-gradient)"/>
</svg>

線性濾鏡的SVG標簽為 linearGradient ，其中 x1 和 y1 為漸變的起始位移， x2 和 y2 為漸變的結束位移。而 stop標簽則用于設置顏色邊界。

其他元素通過 fill:url(#濾鏡ID) 來應用該濾鏡。

放射性漸變示例——彩虹

代碼：

<?xml version="1.0"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg  width="100%" height="100%" version="1.1" xmlns="http://www.w3.org/2000/svg">
<defs>
        <radialGradient id="radial-gradient" cx="50%" cy="50%" r="50%" fx="50%" fy="50%">
                <stop offset="0%" style="stop-color:#E50743;"/>
                <stop offset="15%" style="stop-color:#F9870F;"/>
                <stop offset="30%" style="stop-color:#E8ED30;"/>
                <stop offset="45%" style="stop-color:#3FA62E;"/>
                <stop offset="60%" style="stop-color:#3BB4D7;"/>
                <stop offset="75%" style="stop-color:#2F4D9E;"/>
                <stop offset="80%" style="stop-color:#71378A;"/>
        </radialGradient>
    </defs>
    <circle cx="360" cy="90" r="85" style="fill:url(#radial-gradient)"/>
</svg>