CSS3之漸變

一洲鸠、CSS3漸變簡(jiǎn)介

CSS3漸變是什么拨脉？漸變是兩種或多種顏色之間的平滑過(guò)渡穷吮。CSS3 漸變可以讓你在兩個(gè)或多個(gè)指定的顏色之間顯示平穩(wěn)的過(guò)渡。
CSS3 定義了兩種類型的漸變：

線性漸變（Linear Gradients）- 向下/向上/向左/向右/對(duì)角方向
徑向漸變（Radial Gradients）- 由它們的中心定義

二龙填、什么是色標(biāo)

在創(chuàng)建漸變的過(guò)程中，可以指定多個(gè)中間顏色值拐叉，這個(gè)值稱為色標(biāo)岩遗。每個(gè)色標(biāo)包含一種顏色和一個(gè)位置，瀏覽器從每個(gè)色標(biāo)的顏色淡出到下一個(gè)凤瘦，以創(chuàng)建平滑的漸變宿礁。

三、CSS3線性漸變

在線性漸變過(guò)程中蔬芥，顏色沿著一條直線過(guò)度：從左側(cè)到右側(cè)梆靖，從右側(cè)到左側(cè)，從頂部到底部笔诵，從底部到頂部或沿任意軸返吻。

CSS3制作漸變效果，首先指定一個(gè)漸變的方向乎婿、起始顏色测僵、結(jié)束顏色。具有這三個(gè)參數(shù)就可以制作一個(gè)簡(jiǎn)單谢翎、普通的漸變效果捍靠。

如果制作一個(gè)復(fù)雜的漸變效果沐旨，就需要在同一個(gè)漸變方向增添多個(gè)色標(biāo)。具備這些漸變參數(shù)（至少三個(gè)）榨婆，各瀏覽器就會(huì)繪制與漸變線垂直的顏色結(jié)來(lái)填充整個(gè)容器希俩。

為了創(chuàng)建一個(gè)線性漸變，你必須至少定義兩種顏色結(jié)點(diǎn)纲辽。顏色結(jié)點(diǎn)即你想要呈現(xiàn)平穩(wěn)過(guò)渡的顏色颜武。同時(shí)，你也可以設(shè)置一個(gè)起點(diǎn)和一個(gè)方向（或一個(gè)角度）拖吼。

CSS3線性漸變語(yǔ)法及參數(shù)

線性漸變 - 從上到下（默認(rèn)情況下）
語(yǔ)法：background: linear-gradient(direction, color-stop1, color-stop2, ...);

示例1：預(yù)定義方向

示例圖：

示例代碼：

<!DOCTYPE html>
<html lang="en"> 
<head>
    <meta charset="UTF-8">
    <title>CSS3線性漸變</title>
    <style>
    /*線性漸變 - 從上到下（默認(rèn)情況下）*/ 
    .to-top {
        height: 150px;
        width: 300px;
        margin: 10px auto;
        font-size: 20px;
        color: #fff;
        line-height: 150px;
        text-align: center;
        background: -webkit-linear-gradient(red, blue);
        /* Safari 5.1 - 6.0 */
        background: -o-linear-gradient(red, blue);
        /* Opera 11.1 - 12.0 */
        background: -moz-linear-gradient(red, blue);
        /* Firefox 3.6 - 15 */
        background: linear-gradient(red, blue);
        /* 標(biāo)準(zhǔn)的語(yǔ)法（必須放在最后） */
    }
    /*線性漸變 - 從左到右*/ 
    .to-left {
        height: 150px;
        width: 300px;
        margin: 10px auto;
        font-size: 20px;
        color: #fff;
        line-height: 150px;
        text-align: center;
        background: -webkit-linear-gradient(right, red, blue);
        /* Safari 5.1 - 6.0 */
        background: -o-linear-gradient(right, red, blue);
        /* Opera 11.1 - 12.0 */
        background: -moz-linear-gradient(right, red, blue);
        /* Firefox 3.6 - 15 */
        background: linear-gradient(to right, red, blue);
        /* 標(biāo)準(zhǔn)的語(yǔ)法（必須放在最后） */
    }
    /*線性漸變 - 對(duì)角*/ 
    .to-bottom-right {
        height: 150px;
        width: 300px;
        margin: 10px auto;
        font-size: 20px;
        color: #fff;
        line-height: 150px;
        text-align: center;
        background: -webkit-linear-gradient(left top, red, blue);
        /* Safari 5.1 - 6.0 */
        background: -o-linear-gradient(bottom right, red, blue);
        /* Opera 11.1 - 12.0 */
        background: -moz-linear-gradient(bottom right, red, blue);
        /* Firefox 3.6 - 15 */
        background: linear-gradient(to bottom right, red, blue);
        /* 標(biāo)準(zhǔn)的語(yǔ)法（必須放在最后） */
    }
    </style>
</head> 
<body>
    <!-- 線性漸變 - 從上到下（默認(rèn)情況下） -->
    <div class="to-top">從上到下（默認(rèn)情況下）</div>
    <!-- 線性漸變 - 從左到右 -->
    <div class="to-left">從左到右</div>
    <!-- 線性漸變 - 對(duì)角 -->
    <div class="to-bottom-right">對(duì)角</div>
</body> 
</html>

示例2：使用角度

如果你想要在漸變的方向上做更多的控制鳞上，你可以定義一個(gè)角度，而不用預(yù)定義方向（to bottom吊档、to top篙议、to right、to left怠硼、to bottom right鬼贱，等等）。
角度是指水平線和漸變線之間的角度香璃，逆時(shí)針?lè)较蛴?jì)算这难。換句話說(shuō)，0deg 將創(chuàng)建一個(gè)從下到上的漸變葡秒，90deg 將創(chuàng)建一個(gè)從左到右的漸變姻乓。
語(yǔ)法：background: linear-gradient(angle, color-stop1, color-stop2);

示例圖：

示例代碼：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS3線性漸變</title>
    <style>
    /*線性漸變 - 0deg*/ 
    .deg0 {
        height: 150px;
        width: 300px;
        margin: 10px auto;
        font-size: 20px;
        color: #fff;
        line-height: 150px;
        text-align: center;
        background: -webkit-linear-gradient(0deg, red, blue);
        /* Safari 5.1 - 6.0 */
        background: -o-linear-gradient(0deg, red, blue);
        /* Opera 11.1 - 12.0 */
        background: -moz-linear-gradient(0deg, red, blue);
        /* Firefox 3.6 - 15 */
        background: linear-gradient(0deg, red, blue);
        /* 標(biāo)準(zhǔn)的語(yǔ)法（必須放在最后） */
    }
    /*線性漸變 - 90deg*/ 
    .deg90 {
        height: 150px;
        width: 300px;
        margin: 10px auto;
        font-size: 20px;
        color: #fff;
        line-height: 150px;
        text-align: center;
        background: -webkit-linear-gradient(90deg, red, blue);
        /* Safari 5.1 - 6.0 */
        background: -o-linear-gradient(90deg, red, blue);
        /* Opera 11.1 - 12.0 */
        background: -moz-linear-gradient(90deg, red, blue);
        /* Firefox 3.6 - 15 */
        background: linear-gradient(90deg, red, blue);
        /* 標(biāo)準(zhǔn)的語(yǔ)法（必須放在最后） */
    }
    /*線性漸變 - 180deg*/ 
    .deg180 {
        height: 150px;
        width: 300px;
        margin: 10px auto;
        font-size: 20px;
        color: #fff;
        line-height: 150px;
        text-align: center;
        background: -webkit-linear-gradient(180deg, red, blue);
        /* Safari 5.1 - 6.0 */
        background: -o-linear-gradient(180deg, red, blue);
        /* Opera 11.1 - 12.0 */
        background: -moz-linear-gradient(180deg, red, blue);
        /* Firefox 3.6 - 15 */
        background: linear-gradient(180deg, red, blue);
        /* 標(biāo)準(zhǔn)的語(yǔ)法（必須放在最后） */
    }
    /*線性漸變 - -90deg*/ 
    .deg-90 {
        height: 150px;
        width: 300px;
        margin: 10px auto;
        font-size: 20px;
        color: #fff;
        line-height: 150px;
        text-align: center;
        background: -webkit-linear-gradient(-90deg, red, blue);
        /* Safari 5.1 - 6.0 */
        background: -o-linear-gradient(-90deg, red, blue);
        /* Opera 11.1 - 12.0 */
        background: -moz-linear-gradient(-90deg, red, blue);
        /* Firefox 3.6 - 15 */
        background: linear-gradient(-90deg, red, blue);
        /* 標(biāo)準(zhǔn)的語(yǔ)法（必須放在最后） */
    }
    </style>
</head> 
<body>
    <!-- 線性漸變 - 0deg -->
    <div class="deg0">0 deg</div>
    <!-- 線性漸變 - 90deg -->
    <div class="deg90">90 deg</div>
    <!-- 線性漸變 - 180deg -->
    <div class="deg180">180 deg</div>
    <!-- 線性漸變 - -90 -->
    <div class="deg-90">-90 deg</div>
</body> 
</html>

示例3：使用多個(gè)顏色結(jié)點(diǎn)

示例圖1：

示例代碼1：

<!DOCTYPE html>
<html lang="en"> 
<head>
    <meta charset="UTF-8">
    <title>CSS3線性漸變</title>
    <style>
    /*線性漸變 - 使用多顏色結(jié)點(diǎn)*/ 
    .grad {
        height: 150px;
        width: 300px;
        margin: 10px auto;
        font-size: 20px;
        color: #fff;
        line-height: 150px;
        text-align: center;
        background: -webkit-linear-gradient(left, red, orange, yellow, green, blue, indigo, violet);
        /* Safari 5.1 - 6.0 */
        background: -o-linear-gradient(left, red, orange, yellow, green, blue, indigo, violet);
        /* Opera 11.1 - 12.0 */
        background: -moz-linear-gradient(left, red, orange, yellow, green, blue, indigo, violet);
        /* Firefox 3.6 - 15 */
        background: linear-gradient(to right, red, orange, yellow, green, blue, indigo, violet);
        /* 標(biāo)準(zhǔn)的語(yǔ)法（必須放在最后） */
    }
    </style>
</head> 
<body>
    <!--線性漸變 - 使用多顏色結(jié)點(diǎn) -->
    <div class="grad">使用多顏色結(jié)點(diǎn)</div>
</body> 
</html>

示例圖2：

示例代碼2：

<!DOCTYPE html>
<html lang="en"> 
<head>
    <meta charset="UTF-8">
    <title>CSS3線性漸變</title>
    <style>
    /*線性漸變 - 3 個(gè)顏色結(jié)點(diǎn)（均勻分布）*/ 
    .grad {
        height: 150px;
        width: 300px;
        margin: 10px auto;
        font-size: 20px;
        color: #fff;
        line-height: 150px;
        text-align: center;
        background: -webkit-linear-gradient(red, green, blue);
        /* Safari 5.1 - 6.0 */
        background: -o-linear-gradient(red, green, blue);
        /* Opera 11.1 - 12.0 */
        background: -moz-linear-gradient(red, green, blue);
        /* Firefox 3.6 - 15 */
        background: linear-gradient(red, green, blue);
        /* 標(biāo)準(zhǔn)的語(yǔ)法（必須放在最后） */
    }
    /*線性漸變 - 3 個(gè)顏色結(jié)點(diǎn)（不均勻分布）*/ 
    .grad2 {
        height: 150px;
        width: 300px;
        margin: 10px auto;
        font-size: 20px;
        color: #fff;
        line-height: 150px;
        text-align: center;
        background: -webkit-linear-gradient(red 10%, green 85%, blue 90%);
        /* Safari 5.1 - 6.0 */
        background: -o-linear-gradient(red 10%, green 85%, blue 90%);
        /* Opera 11.1 - 12.0 */
        background: -moz-linear-gradient(red 10%, green 85%, blue 90%);
        /* Firefox 3.6 - 15 */
        background: linear-gradient(red 10%, green 85%, blue 90%);
        /* 標(biāo)準(zhǔn)的語(yǔ)法（必須放在最后） */
    }
    </style>
</head> 
<body>
    <!--線性漸變 - 3 個(gè)顏色結(jié)點(diǎn)（均勻分布） -->
    <div class="grad">3 個(gè)顏色結(jié)點(diǎn)（均勻分布）</div>
    <!--線性漸變 - 3 個(gè)顏色結(jié)點(diǎn)（不均勻分布） -->
    <div class="grad2">3 個(gè)顏色結(jié)點(diǎn)（不均勻分布）</div>
</body> 
</html>

示例4：使用透明度（transparent）

CSS3 漸變也支持透明度（transparent），可用于創(chuàng)建減弱變淡的效果眯牧。
為了添加透明度蹋岩，我們使用 rgba() 函數(shù)來(lái)定義顏色結(jié)點(diǎn)。rgba() 函數(shù)中的最后一個(gè)參數(shù)可以是從 0 到 1 的值学少，它定義了顏色的透明度：0 表示完全透明剪个，1 表示完全不透明。

示例圖：

示例代碼：

<!DOCTYPE html>
<html lang="en"> 
<head>
    <meta charset="UTF-8">
    <title>CSS3線性漸變</title>
    <style>
    /*線性漸變 - 透明度*/ 
    .grad {
        height: 150px;
        width: 300px;
        margin: 10px auto;
        font-size: 20px;
        color: #fff;
        line-height: 150px;
        text-align: center;
        background: -webkit-linear-gradient(left, rgba(255, 0, 0, 0), rgba(255, 0, 0, 1));
        /* Safari 5.1 - 6.0 */
        background: -o-linear-gradient(right, rgba(255, 0, 0, 0), rgba(255, 0, 0, 1));
        /* Opera 11.1 - 12.0 */
        background: -moz-linear-gradient(right, rgba(255, 0, 0, 0), rgba(255, 0, 0, 1));
        /* Firefox 3.6 - 15 */
        background: linear-gradient(to right, rgba(255, 0, 0, 0), rgba(255, 0, 0, 1));
        /* 標(biāo)準(zhǔn)的語(yǔ)法（必須放在最后） */
    }
    </style>
</head> 
<body>
    <!--線性漸變 - 透明度 -->
    <div class="grad">線性漸變 - 透明度</div>
</body>  
</html>

四版确、CSS3徑向漸變

CSS3徑向漸變是圓形或橢圓形漸變扣囊。顏色不再沿著一條直線軸變化，而是從一個(gè)起點(diǎn)朝所有方向混合阀坏。徑向漸變由它的中心定義如暖。

為了創(chuàng)建一個(gè)徑向漸變，你也必須至少定義兩種顏色結(jié)點(diǎn)忌堂。顏色結(jié)點(diǎn)即你想要呈現(xiàn)平穩(wěn)過(guò)渡的顏色盒至。同時(shí)，你也可以指定漸變的中心、形狀（圓形或橢圓形）枷遂、大小樱衷。默認(rèn)情況下，漸變的中心是 center（表示在中心點(diǎn)）酒唉，漸變的形狀是 ellipse（表示橢圓形）矩桂，漸變的大小是 farthest-corner（表示到最遠(yuǎn)的角落）。

CSS3徑向漸變的語(yǔ)法及參數(shù)

語(yǔ)法：background: radial-gradient(center, shape size, start-color, ..., last-color);

漸變的中心位置取值：

<length>：用長(zhǎng)度值指定徑向漸變圓心的橫坐標(biāo)或縱坐標(biāo)痪伦，可以為負(fù)值
<percentage>：用百分比指定徑向漸變圓心的橫坐標(biāo)或縱坐標(biāo)侄榴，可以為負(fù)值
top：設(shè)置頂部為徑向漸變圓心的縱坐標(biāo)值
right：設(shè)置右邊為徑向漸變圓心的橫坐標(biāo)值
bottom：設(shè)置底部為徑向漸變圓心的縱坐標(biāo)值
left：設(shè)置左邊為徑向漸變圓心的橫坐標(biāo)值
center：設(shè)置中間為徑向漸變圓心的橫坐標(biāo)值或縱坐標(biāo)值（默認(rèn)值）

定義徑向漸變的形狀

<shape>主要用來(lái)定義漸變的形狀，主要包括兩個(gè)值circle和ellipse网沾。

circle：指定圓形的徑向漸變
ellipse：指定橢圓形的徑向漸變

指定徑向漸變的形狀大小

<size>用來(lái)確定徑向漸變的結(jié)束形狀大小癞蚕。

closest-side：指定徑向漸變的半徑長(zhǎng)度為從圓心到離圓心最近的邊
closest-corder：指定徑向漸變的半徑長(zhǎng)度為從圓心到離圓心最近的角
farthest-side：指定徑向漸變的半徑長(zhǎng)度為從圓心到離圓心最遠(yuǎn)的邊
farthest-corner：指定徑向漸變的半徑長(zhǎng)度為從圓心到離圓心最遠(yuǎn)的角

示例圖1：

示例代碼1：

<!DOCTYPE html>
<html lang="en"> 
<head>
    <meta charset="UTF-8">
    <title>CSS3線性漸變</title>
    <style>
    /*徑向漸變 - 顏色結(jié)點(diǎn)均勻分布（默認(rèn)情況下）*/ 
    .grad {
        height: 150px;
        width: 300px;
        margin: 10px auto;
        font-size: 20px;
        color: #fff;
        line-height: 150px;
        text-align: center;
        background: -webkit-radial-gradient(red, green, blue);
        /* Safari 5.1 - 6.0 */
        background: -o-radial-gradient(red, green, blue);
        /* Opera 11.6 - 12.0 */
        background: -moz-radial-gradient(red, green, blue);
        /* Firefox 3.6 - 15 */
        background: radial-gradient(red, green, blue);
        /* 標(biāo)準(zhǔn)的語(yǔ)法（必須放在最后） */
    }
    /*徑向漸變 - 顏色結(jié)點(diǎn)不均勻分布*/ 
    .grad2 {
        height: 150px;
        width: 300px;
        margin: 10px auto;
        font-size: 20px;
        color: #fff;
        line-height: 150px;
        text-align: center;
        background: -webkit-radial-gradient(red 5%, green 15%, blue 60%);
        /* Safari 5.1 - 6.0 */
        background: -o-radial-gradient(red 5%, green 15%, blue 60%);
        /* Opera 11.6 - 12.0 */
        background: -moz-radial-gradient(red 5%, green 15%, blue 60%);
        /* Firefox 3.6 - 15 */
        background: radial-gradient(red 5%, green 15%, blue 60%);
        /* 標(biāo)準(zhǔn)的語(yǔ)法（必須放在最后） */
    }
    </style>
</head> 
<body>
    <!--徑向漸變 - 顏色結(jié)點(diǎn)均勻分布（默認(rèn)情況下）-->
    <div class="grad">顏色結(jié)點(diǎn)均勻分布</div>
    <!--徑向漸變 - 顏色結(jié)點(diǎn)不均勻分布-->
    <div class="grad2">顏色結(jié)點(diǎn)不均勻分布</div>
</body> 
</html>

示例圖2：

示例代碼2：

<!DOCTYPE html>
<html lang="en"> 
<head>
    <meta charset="UTF-8">
    <title>CSS3線性漸變</title>
    <style>
    /*徑向漸變 - 橢圓形 Ellipse（默認(rèn)）*/ 
    .grad {
        height: 150px;
        width: 300px;
        margin: 10px auto;
        font-size: 20px;
        color: #fff;
        line-height: 150px;
        text-align: center;
        background: -webkit-radial-gradient(red, yellow, green);
        /* Safari 5.1 - 6.0 */
        background: -o-radial-gradient(red, yellow, green);
        /* Opera 11.6 - 12.0 */
        background: -moz-radial-gradient(red, yellow, green);
        /* Firefox 3.6 - 15 */
        background: radial-gradient(red, yellow, green);
        /* 標(biāo)準(zhǔn)的語(yǔ)法（必須放在最后） */
    }
    /*徑向漸變 - 圓形 Circle*/ 
    .grad2 {
        height: 150px;
        width: 300px;
        margin: 10px auto;
        font-size: 20px;
        color: #fff;
        line-height: 150px;
        text-align: center;
        background: -webkit-radial-gradient(circle, red, yellow, green);
        /* Safari 5.1 - 6.0 */
        background: -o-radial-gradient(circle, red, yellow, green);
        /* Opera 11.6 - 12.0 */
        background: -moz-radial-gradient(circle, red, yellow, green);
        /* Firefox 3.6 - 15 */
        background: radial-gradient(circle, red, yellow, green);
        /* 標(biāo)準(zhǔn)的語(yǔ)法（必須放在最后） */
    }
    </style>
</head> 
<body>
    <!--徑向漸變 - 橢圓形 Ellipse（默認(rèn)）-->
    <div class="grad">橢圓形 Ellipse</div>
    <!--徑向漸變 - 圓形 Circle-->
    <div class="grad2">圓形 Circle</div>
</body> 
</html>

示例圖3：

示例代碼3：

<!DOCTYPE html>
<html lang="en"> 
<head>
    <meta charset="UTF-8">
    <title>CSS3線性漸變</title>
    <style>
    /*徑向漸變 - closest-side*/ 
    .grad {
        height: 150px;
        width: 300px;
        margin: 10px auto;
        font-size: 20px;
        color: #fff;
        line-height: 150px;
        text-align: center;
        background: -webkit-radial-gradient(60% 55%, closest-side, blue, green, yellow, black);
        /* Safari 5.1 - 6.0 */
        background: -o-radial-gradient(60% 55%, closest-side, blue, green, yellow, black);
        /* Opera 11.6 - 12.0 */
        background: -moz-radial-gradient(60% 55%, closest-side, blue, green, yellow, black);
        /* Firefox 3.6 - 15 */
        background: radial-gradient(60% 55%, closest-side, blue, green, yellow, black);
        /* 標(biāo)準(zhǔn)的語(yǔ)法（必須放在最后） */
    }
    /*徑向漸變 - farthest-side*/ 
    .grad2 {
        height: 150px;
        width: 300px;
        margin: 10px auto;
        font-size: 20px;
        color: #fff;
        line-height: 150px;
        text-align: center;
        background: -webkit-radial-gradient(60% 55%, farthest-side, blue, green, yellow, black);
        /* Safari 5.1 - 6.0 */
        background: -o-radial-gradient(60% 55%, farthest-side, blue, green, yellow, black);
        /* Opera 11.6 - 12.0 */
        background: -moz-radial-gradient(60% 55%, farthest-side, blue, green, yellow, black);
        /* Firefox 3.6 - 15 */
        background: radial-gradient(60% 55%, farthest-side, blue, green, yellow, black);
        /* 標(biāo)準(zhǔn)的語(yǔ)法（必須放在最后） */
    }
    /*徑向漸變 - closest-corner*/ 
    .grad3 {
        height: 150px;
        width: 300px;
        margin: 10px auto;
        font-size: 20px;
        color: #fff;
        line-height: 150px;
        text-align: center;
        background: -webkit-radial-gradient(60% 55%, closest-corner, blue, green, yellow, black);
        /* Safari 5.1 - 6.0 */
        background: -o-radial-gradient(60% 55%, closest-corner, blue, green, yellow, black);
        /* Opera 11.6 - 12.0 */
        background: -moz-radial-gradient(60% 55%, closest-corner, blue, green, yellow, black);
        /* Firefox 3.6 - 15 */
        background: radial-gradient(60% 55%, closest-corner, blue, green, yellow, black);
        /* 標(biāo)準(zhǔn)的語(yǔ)法（必須放在最后） */
    }
    /*徑向漸變 - farthest-corner*/ 
    .grad4 {
        height: 150px;
        width: 300px;
        margin: 10px auto;
        font-size: 20px;
        color: #fff;
        line-height: 150px;
        text-align: center;
        background: -webkit-radial-gradient(60% 55%, farthest-corner, blue, green, yellow, black);
        /* Safari 5.1 - 6.0 */
        background: -o-radial-gradient(60% 55%, farthest-corner, blue, green, yellow, black);
        /* Opera 11.6 - 12.0 */
        background: -moz-radial-gradient(60% 55%, farthest-corner, blue, green, yellow, black);
        /* Firefox 3.6 - 15 */
        background: radial-gradient(60% 55%, farthest-corner, blue, green, yellow, black);
        /* 標(biāo)準(zhǔn)的語(yǔ)法（必須放在最后） */
    }
    </style>
</head> 
<body>
    <!--徑向漸變 - closest-side-->
    <div class="grad">closest-side</div>
    <!--徑向漸變 - closest-corner-->
    <div class="grad3">closest-corner</div>
    <!--徑向漸變 - farthest-side-->
    <div class="grad2">farthest-side</div> 
    <!--徑向漸變 - farthest-corner-->
    <div class="grad4">farthest-corner</div>
</body> 
</html>

五、CSS3重復(fù)漸變

CSS3通過(guò)repeating-linear-gradient和repeating-radial-gradient可以直接實(shí)現(xiàn)重復(fù)的漸變效果辉哥。

示例效果圖：

示例代碼：

<!DOCTYPE html>
<html lang="en"> 
<head>
    <meta charset="UTF-8">
    <title>CSS3線性漸變</title>
    <style>
    /*重復(fù)線性漸變*/ 
    .grad {
        height: 150px;
        width: 300px;
        margin: 10px auto;
        font-size: 20px;
        color: #fff;
        line-height: 150px;
        text-align: center;
        background-image:-webkit-repeating-linear-gradient(red,orange 40px,orange 80px);
        background-image:repeating-linear-gradient(red,orange 40px,orange 80px);
    }
    /*重復(fù)徑向漸變*/ 
    .grad2 {
        height: 150px;
        width: 300px;
        margin: 10px auto;
        font-size: 20px;
        color: #fff;
        line-height: 150px;
        text-align: center;
        background-image:-webkit-repeating-radial-gradient(red,green 40px,orange 80px);
        background-image:repeating-radial-gradient(red,green 40px,orange 80px);
    } 
    </style>
</head> 
<body>
    <!--重復(fù)線性漸變-->
    <div class="grad">重復(fù)線性漸變</div>
    <!--重復(fù)徑向漸變-->
    <div class="grad2">重復(fù)徑向漸變</div> 
</body> 
</html>

示例效果：筆記本效果

示例代碼：

<!DOCTYPE html>
<html lang="en"> 
<head>
    <meta charset="UTF-8">
    <title>CSS3線性漸變</title>
    <style>
      html,body{
        margin:0;
        padding:0;
        height: 100%;
      }
      .container{
        height: 100%;
        background:-webkit-repeating-linear-gradient(to top,#f9f9f9,#f9f9f9 29px,#ccc 30px);
        background: repeating-linear-gradient(to top,#f9f9f9,#f9f9f9 29px,#ccc 30px);
        background-size:100% 30px;
        position: relative;
      }
      .container:before{
        content: "";
        display: inline-block;
        height: 100%;
        width:4px;
        border-left: double 4px #fca1a1;
        position:absolute;
        left:30px; 
      } 
    </style>
</head> 
<body>
    <div class="container"></div>
</body> 
</html>

六桦山、綜合案例

使用CSS3漸變制作紋理效果。

示例圖：

示例代碼：

<!DOCTYPE html>
<html lang="en"> 
<head>
    <meta charset="UTF-8">
    <title>CSS3漸變紋理效果</title>
    <style>
      .patterns{
        width:200px;
        height: 200px;
        float: left;
        margin:10px;
        box-shadow: 0 1px 8px #666;
      }
      .pt1{
        background-size:50px 50px;
        background-color: #0ae;
        background-image: linear-gradient(rgba(255,255,255,.2) 50%,transparent 50%,transparent);
      }
      .pt2{
        background-size:50px 50px;
        background-color: #f90;
        background-image: linear-gradient(rgba(255,255,255,.2) 50%,transparent 50%,transparent);
      }
       .pt3{
        background-color:#ddeeff;
        background-image: radial-gradient(closest-side,transparent 98%,rgba(0,0,0,0.3) 99%),
                          radial-gradient(closest-side,transparent 98%,rgba(0,0,0,0.3) 99%);
        background-position: 0 0px,40px 40px;
        background-size:80px 80px;
      }
    </style>
</head> 
<body>
    <div class="patterns pt1"></div>
    <div class="patterns pt2"></div>
    <div class="patterns pt3"></div>
</body> 
</html>

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者

人面猴
序言：七十年代末醋旦，一起剝皮案震驚了整個(gè)濱河市恒水，隨后出現(xiàn)的幾起案子，更是在濱河造成了極大的恐慌饲齐，老刑警劉巖钉凌，帶你破解...
沈念sama閱讀 222,627評(píng)論 6贊 517
死咒
序言：濱河連續(xù)發(fā)生了三起死亡事件，死亡現(xiàn)場(chǎng)離奇詭異箩张，居然都是意外死亡甩骏，警方通過(guò)查閱死者的電腦和手機(jī)，發(fā)現(xiàn)死者居然都...
沈念sama閱讀 95,180評(píng)論 3贊 399
救了他兩次的神仙讓他今天三更去死
文/潘曉璐我一進(jìn)店門先慷，熙熙樓的掌柜王于貴愁眉苦臉地迎上來(lái)，“玉大人咨察，你說(shuō)我怎么就攤上這事论熙。” “怎么了摄狱？”我有些...
開(kāi)封第一講書人閱讀 169,346評(píng)論 0贊 362
道士緝兇錄：失蹤的賣姜人
文/不壞的土叔我叫張陵脓诡，是天一觀的道長(zhǎng)。經(jīng)常有香客問(wèn)我媒役，道長(zhǎng)祝谚，這世上最難降的妖魔是什么？我笑而不...
開(kāi)封第一講書人閱讀 60,097評(píng)論 1贊 300
?港島之戀（遺憾婚禮）
正文為了忘掉前任酣衷，我火速辦了婚禮交惯，結(jié)果婚禮上，老公的妹妹穿的比我還像新娘。我一直安慰自己席爽，他們只是感情好意荤，可當(dāng)我...
茶點(diǎn)故事閱讀 69,100評(píng)論 6贊 398
惡毒庶女頂嫁案：這布局不是一般人想出來(lái)的
文/花漫我一把揭開(kāi)白布。她就那樣靜靜地躺著只锻，像睡著了一般玖像。火紅的嫁衣襯著肌膚如雪。梳的紋絲不亂的頭發(fā)上齐饮，一...
開(kāi)封第一講書人閱讀 52,696評(píng)論 1贊 312
城市分裂傳說(shuō)
那天捐寥，我揣著相機(jī)與錄音，去河邊找鬼祖驱。笑死握恳，一個(gè)胖子當(dāng)著我的面吹牛，可吹牛的內(nèi)容都是我干的羹膳。我是一名探鬼主播睡互，決...
沈念sama閱讀 41,165評(píng)論 3贊 422
雙鴛鴦連環(huán)套：你想象不到人心有多黑
文/蒼蘭香墨我猛地睜開(kāi)眼，長(zhǎng)吁一口氣：“原來(lái)是場(chǎng)噩夢(mèng)啊……” “哼陵像！你這毒婦竟也來(lái)了就珠？” 一聲冷哼從身側(cè)響起，我...
開(kāi)封第一講書人閱讀 40,108評(píng)論 0贊 277
萬(wàn)榮殺人案實(shí)錄
序言：老撾萬(wàn)榮一對(duì)情侶失蹤醒颖，失蹤者是張志新（化名）和其女友劉穎妻怎，沒(méi)想到半個(gè)月后，有當(dāng)?shù)厝嗽跇?shù)林里發(fā)現(xiàn)了一具尸體泞歉，經(jīng)...
沈念sama閱讀 46,646評(píng)論 1贊 319
?護(hù)林員之死
正文獨(dú)居荒郊野嶺守林人離奇死亡逼侦，尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛以下內(nèi)容為張勛視角年9月15日...
茶點(diǎn)故事閱讀 38,709評(píng)論 3贊 342
?白月光啟示錄
正文我和宋清朗相戀三年，在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了腰耙。大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片榛丢。...
茶點(diǎn)故事閱讀 40,861評(píng)論 1贊 353
活死人
序言：一個(gè)原本活蹦亂跳的男人離奇死亡，死狀恐怖挺庞，靈堂內(nèi)的尸體忽然破棺而出晰赞，到底是詐尸還是另有隱情，我是刑警寧澤选侨，帶...
沈念sama閱讀 36,527評(píng)論 5贊 351
?日本核電站爆炸內(nèi)幕
正文年R本政府宣布掖鱼，位于F島的核電站，受9級(jí)特大地震影響援制，放射性物質(zhì)發(fā)生泄漏戏挡。R本人自食惡果不足惜，卻給世界環(huán)境...
茶點(diǎn)故事閱讀 42,196評(píng)論 3贊 336
男人毒藥：我在死后第九天來(lái)索命
文/蒙蒙一晨仑、第九天我趴在偏房一處隱蔽的房頂上張望褐墅。院中可真熱鬧拆檬，春花似錦、人聲如沸掌栅。這莊子的主人今日做“春日...
開(kāi)封第一講書人閱讀 32,698評(píng)論 0贊 25
一樁弒父案，背后竟有這般陰謀
文/蒼蘭香墨我抬頭看了看天上的太陽(yáng)猾封。三九已至澄耍，卻和暖如春，著一層夾襖步出監(jiān)牢的瞬間晌缘，已是汗流浹背齐莲。一陣腳步聲響...
開(kāi)封第一講書人閱讀 33,804評(píng)論 1贊 274
情欲美人皮
我被黑心中介騙來(lái)泰國(guó)打工，沒(méi)想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留磷箕，地道東北人选酗。一個(gè)月前我還...
沈念sama閱讀 49,287評(píng)論 3贊 379
代替公主和親
正文我出身青樓，卻偏偏與公主長(zhǎng)得像岳枷，于是被迫代替她去往敵國(guó)和親芒填。傳聞我的和親對(duì)象是個(gè)殘疾皇子，可洞房花燭夜當(dāng)晚...
茶點(diǎn)故事閱讀 45,860評(píng)論 2贊 361

CSS3之漸變

一洲鸠、CSS3漸變簡(jiǎn)介

二龙填、什么是色標(biāo)

三、CSS3線性漸變

CSS3線性漸變語(yǔ)法及參數(shù)

示例1：預(yù)定義方向

示例2：使用角度

示例3：使用多個(gè)顏色結(jié)點(diǎn)

示例4：使用透明度（transparent）

四版确、CSS3徑向漸變

CSS3徑向漸變的語(yǔ)法及參數(shù)

漸變的中心位置取值：

定義徑向漸變的形狀

指定徑向漸變的形狀大小

五、CSS3重復(fù)漸變

六桦山、綜合案例

推薦閱讀更多精彩內(nèi)容