.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. [转载]学习Javascript闭包(Closure)

    学习Javascript闭包(Closure)     源地址: http://www.ruanyifeng.com/blog/2009/08/learning_javascript_closures ...

  2. vue项目使用websocket技术

    一.为什么需要websocket? 前端和后端的交互模式最常见的就是前端发数据请求,从后端拿到数据后展示到页面中.如果前端不做操作,后端不能主动向前端推送数据,这也是http协议的缺陷. 因此,一种新 ...

  3. FreeSql.DbContext 第二个版本介绍

    FreeSql.DbContext 实现类似 EFCore 使用方法,跟踪对象状态,最终通过 SaveChanges 方法提交事务. 目前是第二个初版,已实现状态跟踪保存(导航属性的跟踪暂时不支持). ...

  4. 为什么VUE注册组件命名时不能用大写的?

    这段时间一直在弄vue,当然也遇到很多问题,这里就来跟大家分享一些注册自定义模板组件的心得 首先"VUE注册组件命名时不能用大写"其实这句话是不对的,但我们很多人开始都觉得是对的, ...

  5. Python中使用type、metaclass动态创建方法和属性

    1: type() 我们知道动态语言和静态语言最大的不同,就是函数和类的定义,不是编译时定义的,而是运行时动态创建的. 比方说我们要定义一个Person的class: class Person(obj ...

  6. Java设置PDF有序、无序列表

    文档中的设置有序或无序列表是一种反应内容上下级关系或者内容相同属性的方式,与单纯的文字叙述相比,它能有效增强文档内容的条理性,突出重点.因此,本文将分享通过Java编程在PDF文档中设置有序或无序列表 ...

  7. Odoo11入门请假单模块学习教程源码

    欢迎转载,但必须明显标注转载地址. 系统:Windows10 版本:Odoo11 一.创建模块 1.创建一个模块的骨架结构目录(在windows 的 CMD中) E:\Odoo 11.0> py ...

  8. 利用MAT玩转JVM内存分析(一)

    本文首发于公众号:javaadu 尽管JVM提供了自动内存管理的机制,试图降低程序员的开发门槛,确实也实现了这一目标,在日常开发中,我们一般都不需要关心对象的内存释放.JVM大部分都是使用trace算 ...

  9. 事务及其特性ACID

    一.事务的定义 事务是一组单元化的操作,这组操作可以保证要么全部成功,要么全部失败(只要有一个失败的操作,就会把其他已经成功的操作回滚). 一般所说的数据库事务,它是访问并可能更新数据库中各种数据项的 ...

  10. windows凭据管理

    解决windows凭据无法保存的问题1: 运行-gpedit.msc(组策略)-计算机配置-管理模板-系统-凭据分配 双击右侧”允许分配保存的凭据用于仅NTLM服务器身份验证“ 在弹出的窗口中选中“已 ...