<!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. LNMP一键安装包-CentOS 5/6下自动编译安装Nginx,MySQL,PHP

    适用环境: 系统支持:CentOS-5 (32bit/64bit).CentOS-6 (32bit/64bit) 内存要求:≥128M 安装了什么: 1.Nginx-1.2.0 2.MySQL 5.5 ...

  2. 关于oozie

    什么是Oozie? Oozie是一个工作流引擎服务器,用于运行Hadoop Map/Reduce和Pig 任务工作流.同时Oozie还是一个Java Web程序,运行在Java Servlet容器中, ...

  3. Android寒假实训云笔记总结——欢迎页

    欢迎页使用的是viewpager,需要适配器. 注意点: 1.判断是否是第一次进入这个app. 2.欢迎页小圆点的逻辑. 实现原理: 首先在activity_welcome放入viewpager和固定 ...

  4. Webbrowers控件的小技巧

    我最近接触webbrowers 这个控件比较多,感觉用起来比较顺手吧.可以做很多操作. 貌似很多网络模拟有时候都内置这个控件或者类似的控件,但这样子速度就不能跟那些单纯用API 构建数据包比了. 我一 ...

  5. ie编程半天的学习总结

    自己好久没有来这个博客了,自己陆续去几个地方写博客,一个c++博客园,一个csdn. 感觉都一般吧,看不到什么好的博客,可能自己没有看到吧.以后就在这个博客记录一点技术笔记吧!自己比较懒,只要做为记录 ...

  6. 偶尔会用到的有用的CMD命令

    1.解压CHM cd /d (如果你的chm文档在系统盘的话,就没有必要写这个/d) [你的chm文档的路径名] 回车 hh -decompile [源文件的保存路径] [要反编译的chm格式电子书] ...

  7. iOS NSMutableArray替换某个元素

    A * a1 = [A new]; A * a2 = [A new]; A * a3 = [A new]; A * a4 = [A new]; NSMutableArray *arr = [[NSMu ...

  8. iOS9开发之新增通知行为详解

    苹果在iOS8发布时,收到短信时可以直接在通知栏输入文字并回复,非常炫酷,然而这一功能并未真正开放给开发者.iOS9新增了用户通知行为UIUserNotificationActionBehaviorT ...

  9. UIMenuController/UIPasteboard（2） UITableView上实用剪贴板

    在UITableView上实用剪贴板有两种方法: 一.在tableView的代理方法中直接有三个有关剪贴板的方法. //某行是否允许show菜单 -(BOOL)tableView:(UITableVi ...

  10. 启发式搜索 A*算法的OC 实现

    前两天重新学习了下A*算法,上次学习A*算法已经是5年前了,看到网上铺天盖地的A*算法都是C.C++等等其他语言的,就是没有OC 的,所以抽空写了一份.今天太晚了就不说明A*算法的细节了,大家如果想学 ...