使用css实现以下图案

1、网格

<div class="box box2"></div>
<style>.box {width: 200px;height: 100px;}.box2 {background: white;background-image: linear-gradient(90deg, rgba(200, 0, 0, .5) 50%, transparent 0),linear-gradient(rgba(200, 0, 0, .5) 50%, transparent 0);background-size: 30px 30px;}
</style>

<div class="box box2"></div>
<style>.box {width: 200px;height: 100px;}.box2 {background: #58a;background-image: linear-gradient(white 1px, transparent 0),linear-gradient(90deg, white 1px, transparent 0);background-size: 30px 30px;}
</style>

<div class="box box2"></div>
<style>.box {width: 200px;height: 100px;}.box2 {background: #58a;background-image:linear-gradient(white 2px, transparent 0),linear-gradient(90deg, white 2px, transparent 0),linear-gradient(hsla(0, 0%, 100%, .3) 1px, transparent 0),linear-gradient(90deg, hsla(0, 0%, 100%, .3) 1px, transparent 0);background-size: 75px 75px, 75px 75px,15px 15px, 15px 15px;}
</style>

2、波点

<div class="box box2"></div>
<style>.box {width: 200px;height: 100px;}.box2 {background: #655;background-image: radial-gradient(tan 30%, transparent 0),radial-gradient(tan 30%, transparent 0);background-size: 30px 30px;/* 第二背景的偏移定位值必须是贴片宽高的一半 30/2 */background-position: 0 0, 15px 15px;}
</style>

3、棋盘

以下两种写法效果等同
常规写法：

<div class="box box2"></div>
<style>.box {width: 200px;height: 100px;}.box2 {background: #eee;background-image: linear-gradient(45deg, #bbb 25%, transparent 0),linear-gradient(45deg, transparent 75%, #bbb 0),linear-gradient(45deg, #bbb 25%, transparent 0),linear-gradient(45deg, transparent 75%, #bbb 0);background-position: 0 0, 15px 15px,15px 15px,30px 30px;background-size: 30px 30px;}/* 优化 */.box2 {background: #eee;background-image: linear-gradient(45deg, #bbb 25%, transparent 0, transparent 75%, #bbb 0),linear-gradient(45deg, #bbb 25%, transparent 0, transparent 75%, #bbb 0);background-position: 0 0, 15px 15px;background-size: 30px 30px;}
</style>

使用角向渐变：

<div class="box box2"></div>
<style>.box {width: 200px;height: 100px;}.box2 {background: repeating-conic-gradient(#bbb 0, #bbb 25%, #eee 0, #eee 50%);background-size: 30px 30px;}
</style>

css复杂的背景图案（网格、波点、棋盘）相关推荐

html背景样式代码,12种纯CSS实现的背景图案样式代码
这是使用纯css实现的背景图案样式,可以作用于任何元素甚至文本背景. 使用方法: 1使用NPM安装并下载pattern.css. 2导入pattern.css. 3.或在html文档中加载patter ...
CSS应用：复杂背景图案
通过线性渐变和通过径向渐变可以容易的构造出条纹背景(如果你还对线性渐变和径向渐变不了解,请参考我前面的文章线性渐变和径向渐变,你也可以在遇到困难的时候再去查阅),但他们能做的事情远不止于此,使用他们能 ...
css揭秘笔记——背景与边框
背景与边框半透明边框知识点 background-clip: [border-box] |[padding-box] | [content-box];hsla(<色相>, <饱和 ...
背景是不规则图案css,CSS3 实现花式背景图案
CSS3 gradient介绍一文中介绍了用渐变画实线条纹背景,事实上用渐变配合background背景图层可以创造出各种奇妙的背景效果,例如参照css3patterns.本篇就举几个例子介绍一下它们 ...
CSS揭秘：6.复杂的背景图案（上）
文章目录前言一.网格 1. 实色网格 2. 边框网格 3. 波点 4. 棋盘小结相关阅读前言上一篇文章中我们学会了如何使用渐变实现条纹状的背景,但是实际上条纹背景并不是我们能实现的唯一的背 ...
CSS揭秘：6.复杂的背景图案（下）
文章目录前言一.网格Svg svg css 小结相关阅读前言上一篇文章中我们学会了如何使用实现棋盘背景的方法,但是显而易见的代码量是比较多的.那么怎么可以优化代码量,降低维护成本呢? 一.网 ...
百度css3背景图代码,CSS3 实现花式背景图案
CSS3 gradient介绍一文中介绍了用渐变画实线条纹背景,事实上用渐变配合background背景图层可以创造出各种奇妙的背景效果,例如参照css3patterns.本篇就举几个例子介绍一下它们 ...
css代码添加背景图片常用代码
css代码添加背景图片常用代码 1 背景颜色 {background-color:数值} 2 背景图片 {background-image: url(url)|none} 3 背景重复 {backgr ...
22.CSS边框与背景【上】
第十七章 CSS边框与背景[上] 一.声明边框属性值说明 CSS版本 1.border-width ...

css复杂的背景图案（网格、波点、棋盘）

使用css实现以下图案

1、网格

2、波点

3、棋盘

css复杂的背景图案（网格、波点、棋盘）相关推荐

最新文章

热门文章