.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. java一个大接口拆用多线程方式拆分成多个小接口

    问题引入 目的:我们的接口A  分别调用了a1 a2 a3 三个接口,最终返回值是 a1的返回值+a2的返回值+a3的返回值 如果同步执行 a1 a2 a3 然后结果相加 很慢 . 如果异步执行 无法 ...

  2. asp.net core系列 52 Identity 其它关注点

    一.登录分析 在使用identity身份验证登录时,在login中调用的方法是: var result = await _signInManager.PasswordSignInAsync(Input ...

  3. HTTP2和HTTPS来不来了解一下？

    一.前言 只有光头才能变强 HTTP博文回顾: PC端:HTTP就是这么简单 PC端:HTTP面试题都在这里 微信公众号端:HTTP就是这么简单 微信公众号端:HTTP面试题都在这里 本文力求简单讲清 ...

  4. Asp.Net Core Web应用程序—探索

    前言 作为一个Windows系统下的开发者,我对于Core的使用机会几乎为0,但是考虑到微软的战略规划,我觉得,Core还是有先了解起来的必要. 因为,目前微软已经搞出了两个框架了,一个是Net标准( ...

  5. python从学渣到学沫的半月天

    今天又要引进一个新的知识点了,就是模块,可以直接引用的一个东西,从实用性来说很强大,不过还是需要记住模块的类型啊,如何应用还是需要学习和了解的.其中模块是分三种的,一种内置模块python内部提供的功 ...

  6. python检测字符串乱码

    import chardet f=open('test.txt','rb') f_read=f.read() f_charInfo=chardet.detect(f_read) print(f_cha ...

  7. 解决 VS2019 打开 edmx 文件时没有 Diagram 视图的 Bug

    问题描述 安装 VS 2019 (版本:16.0.2)后,发现更新选项中已经没有 “Entity Framework 6.X 工具” 了,打开 .edmx 文件时,呈现的视图是 xml 视图. 解决方 ...

  8. php爬取微信文章内容

    php爬取微信文章内容 在做官网升级的时遇到新的需求,需要将公司公众号文章显示在官网的文章模块下.但存在的问题是:微信文章的链接会失效,并且需要对文章部分内容做修改,同时要减少微信运营人员的工作量,避 ...

  9. 【机器学习笔记一】协同过滤算法 - ALS

    参考资料 [1]<Spark MLlib 机器学习实践> [2]http://blog.csdn.net/u011239443/article/details/51752904 [3]线性 ...

  10. 使用 Moq 测试.NET Core 应用 -- Mock 属性

    第一篇文章, 关于Mock的概念介绍: https://www.cnblogs.com/cgzl/p/9294431.html 第二篇文章, 关于方法Mock的介绍: https://www.cnbl ...