html5用css3实现线性渐变background-image:linear-gradient使用方法

代码使用：

background-image:linear-gradient

<style>
        div {
            width: 400px;
            height: 150px;
            border: 1px solid #666;
            line-height: 150px;
            text-align: center;
            font-weight: 900;
            font-size: 30px;
            color: #fff;
            margin: 10px auto;
        }
        .gradient {
            background-image:-webkit-linear-gradient(-113deg, #8bfcfe, #64a1ff);
            background-image:linear-gradient(-113deg, #8bfcfe,  #64a1ff);
        }
        .toTop {
            background-image:-webkit-linear-gradient(to top, #8bfcfe, #64a1ff);
            background-image:linear-gradient(to top, #8bfcfe,  #64a1ff);
        }
        .toLeft{
            background-image:-webkit-linear-gradient(to left, #8bfcfe, #64a1ff);
            background-image:linear-gradient(to left, #8bfcfe,  #64a1ff);
        }
        .toRight{
            background-image:-webkit-linear-gradient(to right, #8bfcfe, #64a1ff);
            background-image:linear-gradient(to right, #8bfcfe,  #64a1ff);
        }
        .toBottom{
            background-image:-webkit-linear-gradient(to bottom, #8bfcfe, #64a1ff);
            background-image:linear-gradient(to bottom, #8bfcfe,  #64a1ff);
        }
        .toColors{
            background-image:linear-gradient(45deg,
                green 0%,
                green 25%,
                red  25%,
                red  50%,
                yellow 50%,
                yellow 75%,
                blue 75%,
                blue 100%
            );
        }

    </style>
</head>
<body>
    <div class="gradient"></div>
    <div class="toTop"></div>
    <div class="toLeft"></div>
    <div class="toRight"></div>
    <div class="toBottom"></div>
    <div class="toColors"></div>
</body>

效果如图：

html5用css3实现线性渐变background-image:linear-gradient使用方法