<!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>

gradient css的更多相关文章

  1. some resource favor

    http://www.moxiemanager.com/getit/ : picture file manage with blur 可以和Tinymce结合使用完美实现WYSIWYG的效果 http ...

  2. nginx,tornado,websocket,supervisord配置成型

    因为要上生产环境,所以配置还是专业一些比较好. nginx.conf upstream websocket_host { server 127.0.0.1:9527; } location /ws_l ...

  3. 稍微成型点的用WEBSOCKET实现的实时日志LOG输出

    难的是还是就地用JS显示出来相关的发布进度. 还好,花了一下午实现了. 可以移植到项目中去罗... websocket.py: import tornado.ioloop import tornado ...

  4. Matplotlib数据可视化（3）：文本与轴

      在一幅图表中,文本.坐标轴和图像的是信息传递的核心,对着三者的设置是作图这最为关心的内容,在上一篇博客中虽然列举了一些设置方法,但没有进行深入介绍,本文以围绕如何对文本和坐标轴进行设置展开(对图像 ...

  5. CSS实现兼容性的渐变背景(gradient)效果

    利用css 3实现渐变可以很方便的更改它的颜色,并且能够减少图片的制作,但是它的兼容性并不好,下面的代码就是实现利用css 渐变兼容的代码: .gradient{ width:300px; heigh ...

  6. CSS Gradient文字效果

    你想创建的标题没有渲染和Photoshop每个标题吗?这里是一个简单的CSS技巧向您展示如何创建渐变文字效果,PNG图像(纯CSS,没有Javascript或Flash).你所需要的是一个空的< ...

  7. 【转】CSS实现兼容性的渐变背景(gradient)效果

    一.有点俗态的开场白 要是两年前,实现“兼容性的渐变效果”这个说法估计不会被提出来的,那个时候,说起渐变背景,想到的多半是IE的渐变滤镜,其他浏览器尚未支持,但是,在对CSS3支持日趋完善的今天,实现 ...

  8. CSS gradient渐变之webkit核心浏览器下的使用以及实例

    一.关于渐变 渐变是一种应用于平面的视觉效果,可以从一种颜色逐渐地转变成另外一种颜色,故可以创建类似于彩虹的效果渐变可以应用在任何可以使用图片的地方.例如,您可以指定一个这么一个渐变:顶部的颜色是红色 ...

  9. FCC---Create a Gradual CSS Linear Gradient

    Applied Visual Design: Create a Gradual CSS Linear Gradient background: linear-gradient(gradient_dir ...

随机推荐

  1. 阅读《RobHess的SIFT源码分析：综述》笔记

    今天总算是机缘巧合的找到了照样一篇纲要性质的文章. 如是能早一些找到就好了.不过“在你认为为时已晚的时候,其实还为时未晚”倒是也能聊以自慰,不过不能经常这样迷惑自己,毕竟我需要开始跑了! 就照着这个大 ...

  2. StringBuilder 用法和div获取

    StringBuilder strHtml = new StringBuilder(); strHtml.Append("<tr>"); strHtml.Append( ...

  3. myeclipse安装本地maven fastdfs_client.jar

    为了方便应用程序的访问FastDFS,官网提供了fastdfs-client-java,以便更好的与应用程序结合使用. 下载fastdfs-client-java源码添加到项目工程里面,添加配置文件: ...

  4. hdu 1095 A+B for Input-Output Practice (VII)

    A+B for Input-Output Practice (VII) Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32 ...

  5. date 命令

    在linux环境中,不管是编程还是其他维护,时间是必不可少的,也经常会用到时间的运算,熟练运用date命令来表示自己想要表示的时间,肯定可以给自己的工作带来诸多方便.1．命令格式: date [参数] ...

  6. css 盒子模型理解

    盒子模型是html+css中最核心的基础知识,理解了这个重要的概念才能更好的排版,进行页面布局.下面是自己积累和总结的关于css盒子模型的知识^_^,希望对初学者有用. 一.css盒子模型概念 CSS ...

  7. 10_HTTP协议_入门知识

    [什么是HTTP协议] 对 浏览器客户端 和  服务器端之间的数据传输的格式规范. 客户端连上web服务器后,若想获得web服务器中的某个web资源,需遵循一定的通讯格式,HTTP协议用于定义客户端与 ...

  8. HDU 4764 Stone（博弈）

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=4764 题目大意:Tang和Jiang玩石子游戏,给定n个石子,每次取[1,k]个石子,最先取完的人失败 ...

  9. vs 2010 Cannot find or open the PDB file

    打开VS2010:工具-->选项-->>调试-->符号接下来就是选择Microsoft,然后确认  接着随便编译一个程序,过程会灰常的慢. 看到此目录下符号缓存了吗?C:\Us ...

  10. windows phone 生产含logo的二维码

    这几天了解二维码了解的比较多,不过就是没深入了解.google了一下生产含logo二维码的思路,就是把logo给画到生成的二维码上,还是因为二维码的纠错能力足够好啊,用Graphics对图片进行操作? ...