background-image: -webkit-gradient(linear, 0 0, 100% 100%, color-stop(.25, rgba(255, 255, 255, .2)), color-stop(.25, transparent), color-stop(.5, transparent), color-stop(.5, rgba(255, 255, 255, .2)), color-stop(.75, rgba(255, 255, 255, .2)), color-stop(.75, transparent), to(transparent));

    background-image: -moz-linear-gradient(-45deg, rgba(255, 255, 255, .2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, .2) 75%, transparent 75%, transparent);

    background-image: -o-linear-gradient(-45deg, rgba(255, 255, 255, .2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, .2) 75%, transparent 75%, transparent);

    background-image: linear-gradient(-45deg, rgba(255, 255, 255, .2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, .2) 75%, transparent 75%, transparent);

    -webkit-background-size: 20px 20px;

    background-size: 20px 20px;

    background: -webkit-linear-gradient(top,transparent 39px,blue 40px),-webkit-linear-gradient(left,transparent 39px,red 40px);

    background: -ms-linear-gradient(top,transparent 39px,blue 40px),-ms-linear-gradient(left,transparent 39px,red 40px);

    background-size: 40px 40px;

background: -webkit-linear-gradient(top, transparent 39px, blue 39px, blue 41px, transparent 41px, transparent 79px, red 80px), -webkit-linear-gradient(left, transparent 39px, orange 39px, orange 41px, transparent 41px, transparent 79px, green 80px);

    background-size: 81px 81px;

css3 网格背景的更多相关文章

  1. 第四界css大会 黑魔法-css网格背景、颜色拾取器、遮罩、文字颜色渐变、标题溢出渐变等

    1.css网格背景 <!DOCTYPE html> <html lang="en"> <head> <meta charset=" ...

  2. css3网格效果（整理）

    css3网格效果(整理) 一.总结 一句话总结: css3网格原理是渐变(linear-gradient)绘制图形,background-size属性指定重复的小单元的大小 多个渐变(linear-g ...

  3. CSS3之背景剪裁Background-clip

    CSS3之背景剪裁Background-clip是CSS3中新添加的内容.这个属性还是比较简单的,主要分五个属性值:border.padding.content.no-clip和text.下面将针对这 ...

  4. css实现网格背景

    只使用一个渐变时,我们能创建的图案并不多,当我们把多个渐变图案组合起来,让他们透过彼此的透明区域显现时,神奇的事情就发生了!我们首先想到的是把水平和水质条纹叠加起来,就可以得到各种各样的网格. 1. ...

  5. 基于CSS3动态背景登录框代码

    基于CSS3动态背景登录框代码.这是一款基于jQuery+CSS3实现的带有动画效果的动态背景登陆框特效.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div class ...

  6. CSS3透明背景+渐变样式

    CSS3透明背景+渐变样式 转载自博文:<CSS3透明背景+渐变样式> http://blog.csdn.net/netbug_nb/article/details/44343809 效果 ...

  7. CSS3之背景定位原点background-origin

    背景定位原点background-origin是CSS3新添加的有关背景的属性,主要是改变背景起始的原点位置的.CSS3之背景定位原点background-origin的属性值有三个:border.p ...

  8. 移动开发之css3实现背景几种渐变效果

    移动端背景渐变,非常的年轻,符合90后年轻一代的审美,css3的这个渐变目前主要是应用在手机前端领域. 产品设计中使用渐变色的好处:1:观众不至于眼睛过于疲劳(如果是浅色背景,3个小时下来极容易造成观 ...

  9. css3实现背景颜色渐变，文字颜色渐变，边框颜色渐变

    css3的渐变可以使用2个或者多个指定的颜色之间显示平稳的过渡的效果.这篇文章主要介绍下css3实现背景颜色渐变,文字颜色渐变,边框颜色渐变的方法,以便大家学习参考! 1.css背景颜色渐变 代码: ...

随机推荐

  1. c#删除list中的元素

    public static void TestRemove() { string[] str = { "1", "2", "d", &quo ...

  2. shell通过ping检测整个网段IP的网络状态脚本

    要实现Ping一个网段的所有IP,并检测网络连接状态是否正常,很多方法都可以实现,下面简单介绍两种,如下:脚本1#!/bin/sh# Ping网段所有IP# 2012/02/05ip=1 #通过修改初 ...

  3. [转]MONTHS_BETWEEN Function - Oracle to SQL Server Migration

    本文转自:http://www.sqlines.com/oracle-to-sql-server/months_between In Oracle, MONTHS_BETWEEN(date1, dat ...

  4. node错误集合

    1.端口被占用 node .\app.js events.js:167 throw er; // Unhandled 'error' even 解决办法:8888端口被占用了,更改一个端口就好 2. ...

  5. golang爬取免费代理IP

    golang爬取免费的代理IP,并验证代理IP是否可用 这里选择爬取西刺的免费代理Ip,并且只爬取了一页,爬取的时候不设置useAgent西刺不会给你数据,西刺也做反爬虫处理了,所以小心你的IP被封掉 ...

  6. MINI3内存分配算法

    最差适应算法 #ifdef USING_WORST_FIT { //先找到第一个满足要求的空洞, //再以第一个为标准寻找最适合的空洞. //当最适合的空洞完全吻合 //就直接划给它,当空洞较大时就切 ...

  7. IIS利用X-Forwarded-For获得来访者的真实IP

    https://help.aliyun.com/knowledge_detail/37948.html

  8. OC与JS交互之WKWebView

    上一篇文章我们使用了JavaScriptCore框架重写了之前的示例,iOS8苹果偏爱HTML5,重构了UIWebVIew,给我们带来了WKWebView,使其性能.稳定性.功能大幅度提升,也更好的支 ...

  9. 三、curator recipes之共享的可重入读写锁

    简介 curator实现了跨JVM的可重入读写互斥锁.它使用zookeeper去进行加锁,所以指定相同路径的处理线程将会基于“公平锁”的机制去竞争锁资源. 读写锁包含了读锁.写锁两个,它们的互斥关系如 ...

  10. java类加载机制及方法调用

    类加载机制 概述 类从被加载到虚拟机内存中开始,到卸载出内存为止,它的整个生命周期包括:加载(Loading).验证(Verification).准备(Preparation).解析(Resoluti ...