首頁 >web前端 >css教學 >css徑向漸層怎麼用

css徑向漸層怎麼用

藏色散人原創: 2020-12-22 09:58:452828瀏覽

css徑向漸層的使用方法：先建立一個HTML範例檔案；然後建立一個div塊；最後透過新增css樣式為「background:radial-gradient()」來實現徑向漸層效果即可。

css徑向漸層怎麼用

本教學操作環境：Windows7系統、HTML5&&CSS3版本，此方法適用於所有品牌電腦。

推薦：《css影片教學》

徑向漸層(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)顏色由裡到外分別是紅、黃、綠、藍

效果圖如下

css徑向漸層怎麼用

任務

給4個元素分別設定背景顏色徑向漸層

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

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

(3)漸變的形狀為圓形

(4)漸層的顏色由裡到外依序為紅、黃、綠、藍。

參考碼：

<!DOCTYPE html>
<html>
 
<head>
    <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></div>
    <div></div>
    <div></div>
    <div></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)效果圖如下：

css徑向漸層怎麼用

##參考程式碼：

<!DOCTYPE html>
<html>
 
<head>
    <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></div>
 
</body>
 
</html>

以上是css徑向漸層怎麼用的詳細內容。更多資訊請關注PHP中文網其他相關文章！

html5 css css3 html background

陳述：

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

上一篇：使用CSS3模擬打字效果（程式碼實例）下一篇：使用CSS3模擬打字效果（程式碼實例）

看更多