css background-image_linear-gradient().html

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>css background-image_linear-gradient()</title>
    <style>
        /*参考：https://www.runoob.com/cssref/func-linear-gradient.html
        知识点：
        linear-gradient() 函数用于创建一个线性渐变的 "图像"。
        为了创建一个线性渐变，你需要设置一个起始点和一个方向（指定为一个角度）的渐变效果。
        你还要定义终止色。终止色就是你想让Gecko去平滑的过渡，并且你必须指定至少两种，
        当然也会可以指定更多的颜色去创建更复杂的渐变效果。
        background-image: linear-gradient(direction, color-stop1, color-stop2, ...);
        值                              描述
        direction                      用角度值指定渐变的方向（或角度）。
        color-stop1, color-stop2,...   用于指定渐变的起止颜色。
        个人理解：默认的direction是从上到下（+-180deg），因此可以不指定，direction。
        direction，0deg是从下到上，正的角度是顺时针旋转，负的角度是逆时针旋转。
        */
        * {
            margin: 0;
            padding: 0;
        }

        div, p {
            margin: 5px 10px;
            padding: 5px;
        }

        div {
            width: 200px;
            height: 50px;
            color: white;
            font: bold 1em "微软雅黑", Arial, Helvetica;
            text-align: center;
            background-color: red; /* 不支持线性的时候显示 */
        }

        #grad1 {
            /*默认方向：从上到下。*/
            background-image: linear-gradient(red, yellow, blue);
        }

        #grad2 {
            background-image: linear-gradient(to right, red, yellow, blue);
        }


        #grad3 {
            background-image: linear-gradient(to bottom right, red, yellow, blue);
        }

        #grad4 {
            background-image: linear-gradient(0deg, red, yellow, blue);
        }

        #grad5 {
            background-image: linear-gradient(90deg, red, yellow, blue);
        }

        #grad6 {
            background-image: linear-gradient(180deg, red, yellow, blue);
        }

        #grad7 {
            background-image: linear-gradient(-90deg, red, yellow, blue);
        }

        #grad8 {
            /*width: 100%;*/
            background-image: linear-gradient(to right, red, orange, yellow, green, blue, indigo, violet); /* 标准的语法（必须放在最后） */
        }

        #grad9 {
            background-color: transparent; /* 不支持线性的时候显示 */
            background-image: linear-gradient(to right, rgba(255, 0, 0, 0), rgba(255, 0, 0, 1));
        }
    </style>
</head>
<body>
<div id="grad1">red, yellow, blue</div>
<div id="grad2">to right, red, yellow, blue</div>
<div id="grad3">to bottom right, red, yellow, blue</div>
<div id="grad4">0deg, red, yellow, blue</div>
<div id="grad5">90deg, red, yellow, blue</div>
<div id="grad6">180deg, red, yellow, blue</div>
<div id="grad7">-90deg, red, yellow, blue</div>
<div id="grad8" style="color:#888888;font-size:40px;font-weight:bold">
    渐变背景
</div>
<div id="grad9">to right, rgba(255,0,0,0), rgba(255,0,0,1)</div>
<p><strong>注意：</strong> Internet Explorer 9 及更早版本 IE 浏览器不支持渐变。</p>
</body>
</html>
效果图：
css background-image_linear-gradient().html