.div1 {
height: 80px;
background: linear-gradient( 135deg, transparent 0, transparent 49.5%, green 49.5%, green 50.5%, transparent 50.5%, transparent 100%),
linear-gradient( 45deg, transparent 0, transparent 49.5%, red 49.5%, red 50.5%, transparent 50.5%, transparent 100%);
background-size: 30px 30px;
}

显示效果:

.div1 {
height: 90px;
background: linear-gradient( 135deg, transparent 0, transparent 49.5%, green 49.5%, green 50.5%, transparent 50.5%, transparent 100%),
linear-gradient( 45deg, transparent 0, transparent 49.5%, red 49.5%, red 50.5%, transparent 50.5%, transparent 100%),
radial-gradient(transparent 0, transparent 49.5%, red 49.5%, red 50.5%, transparent 50.5%, transparent 100%),
radial-gradient(transparent 0, transparent 59.5%, green 59.5%, green 60.5%, transparent 60.5%, transparent 100%)
;
background-size: 30px 30px;
}

显示效果

css3 笔记 背景的更多相关文章

  1. CSS3之背景剪裁Background-clip

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

  2. CSS3笔记之第一天

    通过展示实例来初步学习CSS3 1.背景 设置背景色:background-color:#b0c4de; 设置背景图片:background-image:url('paper.gif'); 设置背景图 ...

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

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

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

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

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

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

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

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

  7. css3实现背景颜色渐变,文字颜色渐变,边框颜色渐变

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

  8. 笔记 : CSS3实现背景渐变过渡

    使用CSS3的人都知道背景background-image是可以线性渐变(linear-gradient)和径向渐变(radial-gradient),但是想要做到过渡动画,单纯的background ...

  9. [CSS3] 学习笔记-背景与边框相关样式

    1.与背景相关的新增属性 包括:backgroud-clip,backgroud-origin,backgroud-size <!DOCTYPE html> <html> &l ...

随机推荐

  1. VS2017 WinFrom打包设置与教程

    前言 项目中有用到winfrom做配套的打印程序,直接给客户一个debug文件夹,当然不是很好.. 记录一下打包过程. 正文 首先需要下载 Visual Studio插件,到如图的地方下载: 搜索Mi ...

  2. Shim 与 Polyfill

    Shim: 用来向后兼容.比如 requestIdleCallback,为了在旧的环境中不报错,可以加 shim. 使用环境中现有的 api 来实现,不会引入额外的依赖或其他技术. Polyfill: ...

  3. Python与家国天下

    导读:Python猫是一只喵星来客,它爱地球的一切,特别爱优雅而无所不能的 Python.我是它的人类朋友豌豆花下猫,被授权润色与发表它的文章.如果你是第一次看到这个系列文章,那我强烈建议,请先看看它 ...

  4. JDK和Tomcat安装和配置过程

    Jdk: 第一步:在下载JDK 第二步:安装 更改安装路径 *JDK配置: JAVA_HOME 环境变量  D:\jdk1.7.0 CLASSPATH 环境变量   .,%JAVA_HOME%\lib ...

  5. SAP HUM 锁住一个HU?

    SAP HUM 锁住一个HU? 1)SAP HUM 不能锁一个已发货的HU! 如下的HU 180141205000已经发货过账, HUMO, 执行, 2)一个WHSE状态的HU就可以被锁定.比如HU ...

  6. Win64下编译集成GEOS和Proj4的GDAL

    目录 1.编译GEOS 2.编译Proj4 3.GDAL集成Proj4和GEOS 1) 修改安装的目录 2) 配置Proj4 3) 配置GEOS 4) 自定义动态库名称(可跳过) 5) 编译 1.编译 ...

  7. Kafka系列2-producer和consumer报错

    1. 使用127.0.0.1启动生产和消费进程: 1)启动生产者进程: bin/kafka-console-producer.sh --broker-list 127.0.0.1:9092 --top ...

  8. Tomcat更新方法

    tomcat更新方法最简单的就是上官网下载最新版的压缩包,然后用新版本的 lib 文件替换掉旧版本的 lib 文件 具体方法(偷懒做个搬运工):https://jingyan.baidu.com/ar ...

  9. Linux 桌面玩家指南:01. 玩转 Linux 系统的方法论

    特别说明:要在我的随笔后写评论的小伙伴们请注意了,我的博客开启了 MathJax 数学公式支持,MathJax 使用$标记数学公式的开始和结束.如果某条评论中出现了两个$,MathJax 会将两个$之 ...

  10. 使用ASP.NET Core开发GraphQL服务器 -- 预备知识(下)

    上一篇文章:https://www.cnblogs.com/cgzl/p/9734083.html 处理数据 嵌套字段 看例子: 我想查看viewer下的repositories.注意里面的edges ...