css渐变实现

body{
        width: 100%;
        height: 100%;
        overflow: hidden;
    }
    *{
        margin: 0px;
        padding: 0px;
        font-size: 0px;
    }
    .example{
        width: 100%;
        height: 100%;
        background: -moz-linear-gradient( top,#ccc,#000);
        background: -webkit-linear-gradient( top,#ccc,#cddc39);
        background: -o-linear-gradient(top,#ccc, #000);
    }
    #grad{
        width: 150%;
        height: 150%;
        position: absolute;
        top: 0px;
        left: 0px;;
        background: -webkit-radial-gradient(rgba(255, 0, 0, 0.2) 2%, rgba(255, 0, 0, 0) 60%,rgba(255, 0, 0, 0) 80%); /* Safari 5.1 - 6.0 */
        background: -o-radial-gradient(rgba(255, 0, 0, 0.2) 2%, rgba(255, 0, 0, 0) 60%,rgba(255, 0, 0, 0) 80%); /* Opera 11.6 - 12.0 */
        background: -moz-radial-gradient(rgba(255, 0, 0, 0.2) 2%, rgba(255, 0, 0, 0) 60%,rgba(255, 0, 0, 0) 80%); /* Firefox 3.6 - 15 */
        background: radial-gradient(rgba(255, 0, 0, 0.2) 2%, rgba(255, 0, 0, 0) 60%,rgba(255, 0, 0, 0) 80%); /* 标准的语法 */
     }
     #grad2{
        width: 170%;
        height: 150%;
        position: absolute;
        top: -50%;
        left: 20%;
        background: -webkit-radial-gradient(rgba(233, 30, 99, 0.2) 2%, rgba(255, 0, 0, 0) 60%,rgba(255, 0, 0, 0) 80%); /* Safari 5.1 - 6.0 */
        background: -o-radial-gradient(rgba(233, 30, 99, 0.2) 2%, rgba(255, 0, 0, 0) 60%,rgba(255, 0, 0, 0) 80%); /* Opera 11.6 - 12.0 */
        background: -moz-radial-gradient(rgba(233, 30, 99, 0.2) 2%, rgba(255, 0, 0, 0) 60%,rgba(255, 0, 0, 0) 80%); /* Firefox 3.6 - 15 */
        background: radial-gradient(rgba(233, 30, 99, 0.2) 2%, rgba(255, 0, 0, 0) 60%,rgba(255, 0, 0, 0) 80%); /* 标准的语法 */
     }

     #grad3{
        width: 170%;
        height: 170%;
        position: absolute;
        top: -50%;
        left: -70%;
        background: -webkit-radial-gradient(rgba(33, 150, 243, 0.4) 2%, rgba(255, 0, 0, 0) 60%,rgba(255, 0, 0, 0) 80%); /* Safari 5.1 - 6.0 */
        background: -o-radial-gradient(rgba(33, 150, 243, 0.4) 2%, rgba(255, 0, 0, 0) 60%,rgba(255, 0, 0, 0) 80%); /* Opera 11.6 - 12.0 */
        background: -moz-radial-gradient(rgba(33, 150, 243, 0.4) 2%, rgba(255, 0, 0, 0) 60%,rgba(255, 0, 0, 0) 80%); /* Firefox 3.6 - 15 */
        background: radial-gradient(rgba(33, 150, 243, 0.4) 2%, rgba(255, 0, 0, 0) 60%,rgba(255, 0, 0, 0) 80%); /* 标准的语法 */
     }

　　

线性渐变 （top）

.example {
        width: 150px;
        height: 80px;
        background: -moz-linear-gradient( top,#ccc,#000); /*Mozilla*/
        background: -webkit-linear-gradient(top,#ccc,#000); /*new gradient for Webkit*/
        background: -o-linear-gradient(top,#ccc, #000); /*Opera11*/
        filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr=#1471da, endColorstr=#1C85FB);/*IE<9>*/
        -ms-filter: "progid:DXImageTransform.Microsoft.gradient (GradientType=0, startColorstr=#1471da, endColorstr=#1C85FB)";/*IE8+*/
    }

线性渐变 (left)

.example {
        width: 150px;
        height: 80px;
        background: -moz-linear-gradient( left,#ccc,#000); /*Mozilla*/
        background: -webkit-linear-gradient(left,#ccc,#000); /*new gradient for Webkit*/
        background: -o-linear-gradient(left,#ccc, #000); /*Opera11*/
        filter: progid:DXImageTransform.Microsoft.gradient(GradientType=1, startColorstr=#1471da, endColorstr=#1C85FB);/*IE<9>*/
        -ms-filter: "progid:DXImageTransform.Microsoft.gradient (GradientType=1, startColorstr=#1471da, endColorstr=#1C85FB)";/*IE8+*/
    }  

线性渐变(100deg)

.example {
        width: 150px;
        height: 80px;
        background: -moz-linear-gradient( 100deg,#ccc,#000); /*Mozilla*/
        background: -webkit-linear-gradient(100deg,#ccc,#000); /*new gradient for Webkit*/
        background: -o-linear-gradient(100deg,#ccc, #000); /*Opera11*/
        filter: progid:DXImageTransform.Microsoft.gradient(GradientType=1, startColorstr=#1471da, endColorstr=#1C85FB);/*IE<9>*/
        -ms-filter: "progid:DXImageTransform.Microsoft.gradient (GradientType=1, startColorstr=#1471da, endColorstr=#1C85FB)";/*IE8+*/
    }

　　

线性渐变(left top)

 .example {
        width: 150px;
        height: 80px;
        background: -moz-linear-gradient( left top,#ccc,#000); /*Mozilla*/
        background: -webkit-linear-gradient(left top,#ccc,#000); /*new gradient for Webkit*/
        background: -o-linear-gradient(left top,#ccc, #000); /*Opera11*/
        filter: progid:DXImageTransform.Microsoft.gradient(GradientType=1, startColorstr=#1471da, endColorstr=#1C85FB);/*IE<9>*/
        -ms-filter: "progid:DXImageTransform.Microsoft.gradient (GradientType=1, startColorstr=#1471da, endColorstr=#1C85FB)";/*IE8+*/
    }