<!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. 谈谈项目中遇到的各种iOS7适配问题

    由于我的项目要适配到iOS7.1, 而现在已经是9时代了,在实际工作中我也是遇到了各种奇葩的坑,所以我想尽快把遇到的iOS7适配问题和解决方案分享出来,以后这些东西可能就用处不大了. 1.字体问题 i ...

  2. 【转】Centos配置yum源

    转载自:http://blog.chinaunix.net/uid-23683795-id-3477603.html 网易(163)yum源是国内最好的yum源之一 ,无论是速度还是软件版本,都非常的 ...

  3. 基于嵌入式的c语言连接器

      一个C程序可能是由多个分别编译的部分组成,这些不同部分通过一个通常叫做链接器(或连接器,载入器)的程序合并成一个整体.因为编译器一般每次只处理一个文件,所以它不能检测出那些需要一次了解多个源程序文 ...

  4. JAVA8永久代

    在Java虚拟机(以下简称JVM)中,类包含其对应的元数据,比如类的层级信息,方法数据和方法信息(如字节码,栈和变量大小),运行时常量池,已确定的符号引用和虚方法表. 在过去(当自定义类加载器使用不普 ...

  5. Ubuntu 安装php mcrypt

    sudo apt-get install php5-mcrypt libmcrypt4 libmcrypt-dev sudo php5enmod mcrypt sudo /etc/init.d/apa ...

  6. 你hack那么多啊，该怎么办

    当我们通过javascript来操作css样式的时候,假如我们停留在css2的阶段,会发现操作起来并不是很困难.虽然存在一些浏览器兼容的问题,但我们通过封装自己的函数,不仅可以设置样式还能够获取样式. ...

  7. JNDI初认识

    JNDI即Java命名和目录接口,英文全称为Java Naming and Directory Interface,从字面上似乎十分晦涩,下面从理论和实际项目应用方面来阐述. 1.命名:在我们实际生活 ...

  8. casperjs 抓取爱奇艺高清视频

    CasperJS 是一个开源的导航脚本和测试工具,使用 JavaScript 基于 PhantomJS 编写,用于测试 Web 应用功能,Phantom JS是一个服务器端的 JavaScript A ...

  9. SQL SERVER 主键约束

    主键约束: 遵循关系型模型中的第二范式.唯一的识别一条记录,不能为空. CREATE TABLE Persons ( Id_P int NOT NULL PRIMARY KEY, LastName v ...

  10. -exec和|xargs

    注意xargs会被空格割裂,所以遇到带有空格的文件名就不好办了,解决方法是使用-print0 例如:删除.目录下30天之前的.png文件 -type f -name rm 或者使用-exec:删除.目 ...