gradient css 

<!DOCTYPE html>
<html>
<head>
    <title></title>

    <script src="js/jq.js"></script>
    <script src="js/ko.js"></script>
    <script src="resources/lib/core.js"></script>
    <script src="resources/lib/nav.js"></script>
    <script src="js/index.js"></script>

    <style>
        .container {
            width: 620px;
            height: 415px;;
            display: -ms-grid;
            -ms-grid-columns: 5px (200px 5px)[3];
            -ms-grid-rows: 5px (200px 5px)[2];
            border: 1px solid red;
        }

        .item {
            width: 200px;
            height: 200px;
            line-height: 200px;
            text-align: center;;
            border: 1px solid deepskyblue;
        }

        @keyframes fadeOut {

            0% {
                opacity: 1;
            }

            50% {

                transform: scale(1.5) rotateX(90deg) ;
            }

            100% {
                opacity: 1;
            }

        }

        .item:hover {
            animation: fadeOut 1s;
        }



        .container .item:first-child {
            -ms-grid-column: 2;
            -ms-grid-row: 2;
            background-image:  linear-gradient(45deg,yellow 0%,green 50%,blue 100%);

        }

        .container .item:nth-child(2) {
            -ms-grid-column: 4;
            -ms-grid-row: 2;
            background-image:  linear-gradient(225deg,yellow 0%,green 50%,blue 100%);
        }

        .container .item:nth-child(3) {
            -ms-grid-column: 6;
            -ms-grid-row: 2;

            background-image:  radial-gradient(circle,yellow 0%,green 50%,blue 100%);
        }

        .container .item:nth-child(4) {
            -ms-grid-column: 2;
            -ms-grid-row: 4;
            background-image:  radial-gradient(ellipse,yellow 0%,green 50%,blue 100%);

        }

        .container .item:nth-child(5) {
            -ms-grid-column: 4;
            -ms-grid-row: 4;
            background-image:  radial-gradient(farthest-side at 40px 40px,yellow 0%,green 50%,blue 100%);
        }

        .container .item:nth-child(6) {
            -ms-grid-column: 6;
            -ms-grid-row: 4;
            background-image:  radial-gradient(closest-side at 140px 140px,yellow 0%,green 50%,blue 100%);
        }


    </style>
</head>
<body>


<div class='container' data-bind='foreach:people'>
    <div class='item' data-bind='text:item'>

    </div>

</div>

</body>
</html>

 

 

 

 

posted @ 2013-07-19 17:10  高捍得  阅读(297)  评论(0)    收藏  举报