CSS渐变

浏览数：39 / 时间：2015年06月09日
今天学了渐变才发现，真的不难就是方向多了，记的东西多了一丢丢。
<!DOCTYPE html>
<html>
    <head>
        <title>首页</title>
        <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
        <meta http-equiv="Pragma" name="no-store" />
        <meta http-equiv="Cache-Control" name="no-store" />
        <meta http-equiv="window-target" content="_top" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
        <meta name="HandheldFriendly" content="true" />
        <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
        <meta name="apple-mobile-web-app-capable" content="yes" />
        <meta content="telephone=no" name="format-detection" />
        <meta name="renderer" content="webkit">
        <meta name="screen-orientation" content="portrait">
        <meta name="full-screen" content="yes">
        <meta name="x5-orientation" content="portrait">
        <meta name="x5-fullscreen" content="true">
        <meta name="msapplication-tap-highlight" content="no">
        <link rel="stylesheet" href="css/template.css" />
        <style>
            div{
                width:100%;
                height:100px;
            }
                /*从orange向green渐变*/
                /*从左向右渐变*/
            .linear1{
                background-image: linear-gradient(360deg,orange,green);background-image:-webkit-linear-gradient(360deg,orange,green);}
            .linear8{background-image: linear-gradient(0deg,orange,green);background-image:-webkit-linear-gradient(0deg,orange,green);}
            /*效果是从顶部向底部渐变*/
            .linear2{background-image: linear-gradient(to bottom,orange,green);background-image:-webkit-linear-gradient(to bottom,orange,green);}
            .linear6{background-image: linear-gradient(270deg,orange,green);background-image:-webkit-linear-gradient(270deg,orange,green);}
            /*从右边向左边渐变*/
            .linear3{background-image: linear-gradient(180deg,orange,green);background-image:-webkit-linear-gradient(180deg,orange,green);}
            .linear4{background-image: linear-gradient(-180deg,orange,green);background-image:-webkit-linear-gradient(-180deg,orange,green);}
            /*效果是从底部向顶部渐变*/
            .linear5{background-image: linear-gradient(90deg,orange,green);background-image:-webkit-linear-gradient(90deg,orange,green);}
            .linear7{background-image: linear-gradient(-270deg,orange,green);background-image:-webkit-linear-gradient(-270deg,orange,green);}
            .linear9{background-image:linear-gradient(to top,orange,green);background-image:-webkit-linear-gradient(to top,orange,green);}
            /*从右下角向左上角线性渐变*/
            .linear10{background-image: linear-gradient(to top left,#00cc66,#505050);background-image:-webkit-linear-gradient(to top left,#00cc66,#505050);}
            /*从左下角向右上角线性渐变*/
            .linear11{background-image: linear-gradient(to top right,#00cc66,#505050);background-image:-webkit-linear-gradient(to top right,#00cc66,#505050);}
            /*从右上角向左下角线性渐变*/
            .linear12{background-image:linear-gradient(to bottom left,#00cc66,#505050);background-image:-webkit-linear-gradient(to bottom left,#00cc66,#505050);}
            /*从左上角向右下角线性渐变*/
            .linear13{background-image: linear-gradient(to bottom right,#00cc66,#505050);background-image:-webkit-linear-gradient(to bottom right,#00cc66,#505050);}
            /*从右向左线性渐变*/
            .linear14{background-image: linear-gradient(to left,#505050,green,#00cc66,orange);background-image:-webkit-linear-gradient(to left,#505050,green,#00cc66,orange);}
            /*径向渐变*/
            /*1,渐变往中心方向聚焦--center*/
            .linear15{
                background-image:radial-gradient(circle at center,#505050,#00cc66);
                background-image:-webkit-radial-gradient(circle at center,#505050,#00cc66);
                }
            /*2,渐变往顶部方向聚焦--top*/
            /*3,渐变往右边方向聚焦--right*/
            /*4,渐变往底部方向聚焦--bottom*/
            /*5,渐变往左边方向聚焦--left*/
            /*6,渐变往左上角方向聚焦--top left*/
            /*7,渐变往右上角方向聚焦--top right*/
            /*8,渐变往右下角方向聚焦--bottom right*/
            /*9,渐变往左下角方向聚焦--bottom left*/
            /*circle是圆形,ellipse是椭圆形*/
            /*圆形渐变*/
            .linear16{
                background-image:radial-gradient(20px circle at center,#505050,#00cc66);
                background-image:-webkit-radial-gradient(circle at center,#505050,#00cc66);
                }
            /*椭圆渐变*/
            .linear17{
                background-image:radial-gradient(2em 4em ellipse at center,#505050,#00cc66);
                background-image:-webkit-radial-gradient(circle at center,#505050,#00cc66);
                }
                /*可以自定义圆形的方向*/
            .linear18{
                background-image:radial-gradient(2em circle at top,#505050,#00cc66);
                background-image:-webkit-radial-gradient(circle at center,#505050,#00cc66);
                }
                /*可以多色渐变*/
            .linear19{
                background:radial-gradient(red 20%,green 50%,blue 80%);
                background:-webkit-radial-gradient(red 20%,green 50%,blue 80%);
                }
        </style>
    </head>

    <body>
        <section>    
        <!--从左向右渐变-->
        <div class="linear1"></div>
        <div class="linear8"></div>
        <!--从顶部向底部渐变-->
        <div class="linear2"></div>
        <div class="linear6"></div>
        <!--从右边向左边渐变-->
        <div class="linear3"></div>
        <div class="linear4"></div>
        <!--从底部向顶部渐变-->
        <div class="linear5"></div>
        <div class="linear7"></div>
        <div class="linear9"></div>
        <!--从右下角向左上角线性渐变-->
        <div class="linear10"></div>
        <!--从左下角向右上角线性渐变-->
        <div class="linear11"></div>
        <!--从右上角向左下角线性渐变-->
        <div class="linear12"></div>
        <!--从左上角向右下角线性渐变-->
        <div class="linear13"></div>
        <!--从右向左渐变-->
        <div class="linear14"></div>
        <!--径向渐变-->
        <div class="linear15"></div>
        <!--圆形渐变-->
        <div class="linear16"></div>
        <!--椭圆渐变-->
        <div class="linear17"></div>
        <!--可以自定义圆形的方向-->
        <div class="linear18"></div>
        
        <div class="linear19"></div>
        </section>
    </body>

</html>