碼上歡樂
相關內容    簡體    繁體

CSS3之徑向漸變

本文轉載自   查看原文   2019-09-20 18:08   354    HTML和CSS

 

  •  
     
    • 設置最終形狀參數：
    • 設置長半軸和短半軸
    • 設置橢圓對稱中心
    • 設置色標

    • 輸出代碼：
      radial-gradient(circle closest-side at center, red 50%, blue 100%,white 100%)

徑向漸變(radial gradients)：從起點到終點顏色從內而外沿進行圓形漸變。

語法

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

徑向漸變-設置形狀

語法：

background:radial-gradient(shape,start-color,……,last-color);

說明：

shape值可以取兩個

circle——圓形

ellipse——橢圓(默認)

徑向漸變-尺寸大小關鍵字

尺寸大小關鍵字是確定結束顏色的位置，默認值為farthest-corner。

語法

background:radial-gradient(size,start-color,……,last-color);

size取值為以下四個關鍵字：

closest-side:最近邊

farthest-side:最遠邊

closest-corner:最近角

farthest-corner：最遠角

實例：

 div {
      width: 300px;
      height: 200px;
      /* Safari 5.1 - 6.0 */
      background: -webkit-radial-gradient(30% 70%, farthest-side, blue, green, yellow, black);
      /* Opera 11.6 - 12.0 */
      background: -o-radial-gradient(30% 70%, farthest-side, blue, green, yellow, black);
      /* Firefox 3.6 - 15 */
      background: -moz-radial-gradient(30% 70%, farthest-side, blue, green, yellow, black);
      /* 標准的語法 */
      background: radial-gradient(30% 70%, farthest-side, blue, green, yellow, black);
    }

　　

徑向漸變-圓心位置

語法：

background:radial-gradient(level-percent vertical-percent,start-color,……,last-color);

注意：圓心位置的標准語法目前主流瀏覽器支持性較差，需要注意加瀏覽器前綴。

一般使用時的方式：

-webkit-background:radial-gradient(level-percent vertical-percent,start-color,……,last-color);

-o-background:radial-gradient(level-percent vertical-percent,start-color,……,last-color);

-moz-background:radial-gradient(level-percent vertical-percent,start-color,……,last-color);

background:radial-gradient(level-percent vertical-percent,start-color,……,last-color);

思考：1、漸變中顏色后面百分比值有何含義?

3-12編程練習

小伙伴們，學習了CSS3徑向漸變，根據效果圖，補充代碼，實現：

(1)以中心(60% 40%)為起點，設置圓心到最近邊、最圓邊、最近角、最圓角的四種徑向漸變效果。

(2)徑向漸變的形狀是圓形

(3)顏色由里到外分別是紅、黃、綠、藍

效果圖如下

任務

給4個元素分別設置背景顏色徑向漸變

(1)分別設置徑向漸變大小為最近邊、最遠邊、最近角、最遠角

(2)漸變的圓心為60%和40%

(3)漸變的形狀為圓形

(4)漸變的顏色由里到外依次為紅、黃、綠、藍。

參考代碼：

<!DOCTYPE html>
<html>

<head lang="zh-CN">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">

    <title>徑向漸變</title>
    <style>
        div {
            width: 200px;
            height: 300px;
            float: left;
            margin: 100px 0 0 100px;
        }

        /* 補充代碼，分別寫出4個元素的背景漸變效果 */

        .div1 {
            background: -webkit-radial-gradient(60% 40%,closest-side circle, red,yellow,green,blue);
            /* Opera 11.6 - 12.0 */
            background: -o-radial-gradient(60% 40%,closest-side circle, red,yellow,green,blue);
            /* Firefox 3.6 - 15 */
            background: -moz-radial-gradient(60% 40%,closest-side circle, red,yellow,green,blue);
            /* 標准的語法 */
            background: radial-gradient(60% 40%,closest-side circle, red,yellow,green,blue);
        }
        .div2 {
            background: -webkit-radial-gradient(60% 40%,farthest-side circle, red,yellow,green,blue);
            /* Opera 11.6 - 12.0 */
            background: -o-radial-gradient(60% 40%,farthest-side circle, red,yellow,green,blue);
            /* Firefox 3.6 - 15 */
            background: -moz-radial-gradient(60% 40%,farthest-side circle, red,yellow,green,blue);
            /* 標准的語法 */
            background: radial-gradient(60% 40%,farthest-side circle, red,yellow,green,blue);
        }
        .div3 {
            background: -webkit-radial-gradient(60% 40%,closest-corner circle, red,yellow,green,blue);
            /* Opera 11.6 - 12.0 */
            background: -o-radial-gradient(60% 40%,closest-corner circle, red,yellow,green,blue);
            /* Firefox 3.6 - 15 */
            background: -moz-radial-gradient(60% 40%,closest-corner circle, red,yellow,green,blue);
            /* 標准的語法 */
            background: radial-gradient(60% 40%,closest-corner circle, red,yellow,green,blue);
        }
        .div4 {
            background: -webkit-radial-gradient(60% 40%,farthest-corner circle, red,yellow,green,blue);
            /* Opera 11.6 - 12.0 */
            background: -o-radial-gradient(60% 40%,farthest-corner circle, red,yellow,green,blue);
            /* Firefox 3.6 - 15 */
            background: -moz-radial-gradient(60% 40%,farthest-corner circle, red,yellow,green,blue);
            /* 標准的語法 */
            background: radial-gradient(60% 40%,farthest-corner circle, red,yellow,green,blue);
        }
    </style>
</head>

<body>
    <div class="div1"></div>
    <div class='div2'></div>
    <div class='div3'></div>
    <div class='div4'></div>
</body>

</html>

　　

徑向漸漸-重復漸變

background:repeating-radial-gradient(color1 length|percent,color2 length|percent,……);

3-14編程練習

小伙伴們，我們學習了CSS3徑向漸變中的重復漸變，接下來，根據效果圖寫出代碼，實現以元素中心為原點進行多個彩虹球的重復徑向漸變。

(1)要求彩虹的7個顏色，取值范圍從0%開始，一次加5%，比如紅色是0%，橙色是5%，黃色是10%，依次類推

(2)提示：彩虹球的顏色，用英語單詞表示即可

(3)效果圖如下：

參考代碼：

<!DOCTYPE html>
<html>

<head lang="zh-CN">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">

    <title>徑向漸變</title>
    <style>
        div {
            width: 400px;
            height: 400px;
            /* 補充代碼 */
            background: -webkit-repeating-radial-gradient(closest-side circle, red 0%,orange 5%,yellow 10%,green 15%,blue 20%,indigo 25%,purple 30%);
            /* Opera 11.6 - 12.0 */
            background: -o-repeating-radial-gradient( closest-side circle,red 0%,orange 5%,yellow 10%,green 15%,blue 20%,indigo 25%,purple 30%);
            /* Firefox 3.6 - 15 */
            background: -moz-repeating-radial-gradient(closest-side circle,red 0%,orange 5%,yellow 10%,green 15%,blue 20%,indigo 25%,purple 30%);
            /* 標准的語法 */
            background: repeating-radial-gradient( closest-side circle, red 0%,orange 5%,yellow 10%,green 15%,blue 20%,indigo 25%,purple 30%);
        }
    </style>
</head>

<body>
    <div class="div1"></div>

</body>

</html>

　　

3-18編程練習

小伙伴們，根據要求，補充代碼(使用CSS3背景的漸變及其它屬性寫出)，要求如下：

四個角是紫色，中間的顏色是黃色

將上面的小圖呈4*4顯示出來，效果如下：

任務

第一步：使用線性漸變創建背景圖片

(1)先將單個的背景效果寫出來

(2)這個漸變效果是四個角是紫色，中間是透明的，可以使用角度漸變寫出來

第二步：規定這個背景圖像的尺寸是100*100.

參考代碼：

<!DOCTYPE html>
<html>

<head lang="zh-CN">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">

    <title>3-18編程練習</title>
    <style>
        div {
            width: 400px;
            height: 400px;
            background-color: yellow;
            /* 補充代碼 */
            background-size: 100px 100px;

            background-image: -webkit-linear-gradient(45deg, purple 25%, transparent 25%),
                -webkit-linear-gradient(45deg, transparent 75%, purple 75%),
                -webkit-linear-gradient(-45deg, purple 25%, transparent 25%),
                -webkit-linear-gradient(-45deg, transparent 75%, purple 75%);
            /* Opera 11.6 - 12.0 */
            background-image: -o-linear-gradient(45deg, purple 25%, transparent 25%),
                -o-linear-gradient(45deg, transparent 75%, purple 75%),
                -o-linear-gradient(-45deg, purple 25%, transparent 25%),
                -o-linear-gradient(-45deg, transparent 75%, purple 75%);
            /* Firefox 3.6 - 15 */
            background-image: -moz-linear-gradient(45deg, purple 25%, transparent 25%),
                -moz-linear-gradient(45deg, transparent 75%, purple 75%),
                -moz-linear-gradient(-45deg, purple 25%, transparent 25%),
                -moz-linear-gradient(-45deg, transparent 75%, purple 75%);
            /* 標准的語法 */
            background-image: linear-gradient(45deg, purple 25%, transparent 25%),
                linear-gradient(45deg, transparent 75%, purple 75%),
                linear-gradient(-45deg, purple 25%, transparent 25%),
                linear-gradient(-45deg, transparent 75%, purple 75%);
        }
    </style>
</head>

<body>
    <div class="div1"></div>
</body>

</html>

　　


免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。



猜您在找 Css3漸變(Gradients)-徑向漸變 css3 線性漸變和徑向漸變 CSS3學習之radial-gradient（徑向漸變） 【原】[webkit移動開發筆記]之CSS3徑向漸變 CSS3：radial-gradient，徑向漸變的使用方法 CSS3 經典教程系列：CSS3 徑向漸變（radial-gradient） CSS3徑向漸變----大魚吃小魚之孤單的大魚 理解CSS徑向漸變radial-gradient CSS3 02. 邊框、邊框圓角、邊框陰影、邊框圖片、漸變、線性漸變、徑向漸變、背景、過渡transition、2D轉換(縮放、位移、旋轉、傾斜) css3 背景漸變
 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM