DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> CSS入門知識 >> CSS3基礎 >> 6.5 徑向漸變
6.5 徑向漸變
編輯:CSS3基礎     

一、徑向漸變簡介

CSS3徑向漸變,是一種從起點到終點顏色從內到外進行圓形漸變(從中間向外拉,像圓一樣)。CSS3徑向漸變是圓形或橢圓形漸變,顏色不再沿著一條直線漸變,而是從一個起點向所有方向漸變。

這一節建議使用chrome浏覽器學習,這樣站長不用寫一大堆兼容代碼。因為太多的兼容代碼也不利於新手流暢的學習思路。不過實際開發中,兼容代碼大家還是得做到位。

語法:

background:radial-gradient(position ,shape size,start-color,stop-color)

說明:

position:定義圓心位置;

shape size:由2個參數組成,shape定義形狀(圓形或橢圓),size定義大小;

start-color:定義開始顏色值;

stop-color:定義結束顏色值;

position、shape size都是可選參數,如果省略,則表示該項參數采用默認值。大家要非常清楚這一點,不然這一節的代碼你有可能看不懂。

start-color和stop-color為必選參數,並且徑向漸變可以有多個顏色值。

1、定義圓心位置position

position用於定義徑向漸變的圓心位置,屬性值跟background-position屬性值相似,也有2種情況:(1)長度值,如px、em或百分比等;(2)關鍵字。

圓心位置取值(關鍵字) 屬性值 說明 center 中部(默認值) top 頂部 right 右部 bottom 底部 left 左部 top left 左上 top center 靠上居中 top right 右上 left center 靠左居中 center center 正中 right center 靠右居中 bottom left 左下 bottom center 靠下居中 bottom right 右下

舉例:

在線測試
 
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>CSS3徑向漸變</title>
    <style type="text/css">
        /*設置div公共樣式*/
        div
        {
            width:200px;
            height:150px;
            line-height:150px;
            text-align:center;
            color:white;
        }
        #div1
        {
            margin-bottom:10px;
            background:-webkit-radial-gradient(orange,blue); 
        }
        #div2
        {
            background:-webkit-radial-gradient(top,orange,blue);
        }
    </style>
</head>
<body>
    <div id="div1">默認值(center)</div>
    <div id="div2">top</div>
</body>
</html>

在浏覽器預覽效果如下:

分析:

大家可以嘗試改變圓心位置的屬性值,看看實際效果是如何?

2、定義形狀shape和定義大小size

(1)定義形狀shape

shape參數取值 屬性值 說明 circle 定義徑向漸變為“圓形” ellipse 定義徑向漸變為“橢圓形”

舉例:

在線測試
 
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>CSS3徑向漸變</title>
    <style type="text/css">
        /*設置div公共樣式*/
        div
        {
            width:200px;
            height:150px;
            line-height:150px;
            text-align:center;
            color:white;
        }
        #div1
        {
            margin-bottom:10px;
            background:-webkit-radial-gradient(orange,blue);
        }
        #div2
        {
            background:-webkit-radial-gradient(circle,orange,blue);
        }
    </style>
</head>
<body>
    <div id="div1">默認值(ellipse)</div>
    <div id="div2">circle</div>
</body>
</html>

在浏覽器預覽效果如下:

(2)定義大小size

size主要用於定義徑向漸變的結束形狀大小。

size參數取值 屬性值 說明 closet-side 指定徑向漸變的半徑長度為從圓心到離圓心最近的邊 closest-corner 指定徑向漸變的半徑長度為從圓心到離圓心最近的角 farthest-side 指定徑向漸變的半徑長度為從圓心到離圓心最遠的邊 farthest-corner 指定徑向漸變的半徑長度為從圓心到離圓心最遠的角

從定義不知道咋回事?這樣不是你的錯,來個例子先吧。

舉例:

在線測試
 
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>CSS3徑向漸變</title>
    <style type="text/css">
        /*設置div公共樣式*/
        div
        {
            width:120px;
            height:80px;
            line-height:80px;
            text-align:center;
            color:white;
        }
        div+div
        {
            margin-top:10px;
        }
        #div1{background:-webkit-radial-gradient(circle closest-side,orange,blue);}
        #div2{background:-webkit-radial-gradient(circle closest-corner,orange,blue);}
        #div3{background:-webkit-radial-gradient(circle farthest-side,orange,blue);}
        #div4{background:-webkit-radial-gradient(circle farthest-corner,orange,blue);}
    </style>
</head>
<body>
    <div id="div1">closest-side</div>
    <div id="div2">closest-corner</div>
    <div id="div3">farthest-side</div>
    <div id="div4">farthest-corner
    </div>
</body>
</html>

在浏覽器預覽效果如下:

3、開始顏色start-color和結束顏色stop-color

參數start-color用於定義開始顏色,參數stop-color用於定義結束顏色。顏色可以為關鍵詞、十六進制顏色值、RGBA顏色值等。

徑向漸變也接受一個顏色值列表,用於同時定義多種顏色的徑向漸變。

舉例:

在線測試
 
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>CSS3徑向漸變</title>
    <style type="text/css">
        div
        {
            width:200px;
            height:150px;
            background:-webkit-radial-gradient(red,orange,yellow,green,blue);
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

在浏覽器預覽效果如下:

分析:

默認情況下,徑向漸變顏色節點是均勻分布的,不過我們也可以為每一種顏色添加百分比,來使得各個顏色節點不均勻分布。

舉例:

在線測試
 
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>CSS3徑向漸變</title>
    <style type="text/css">
        div
        {
            width:200px;
            height:150px;
            line-height:150px;
            text-align:center;
            color:white;
        }
        #div1{background:-webkit-radial-gradient(red,green,blue);margin-bottom:10px;}
        #div2{background:-webkit-radial-gradient(red 5%,green 30%,blue 60%);}
    </style>
</head>
<body>
    <div id="div1">顏色均勻分布</div>
    <div id="div2">顏色不均勻分布</div>
</body>
</html>

在浏覽器預覽效果如下:

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved