我们首先使用径向渐变创建一个圆点阵列
background: white;
background-image: radial-gradient(rgba(200,0,0,.5) 30%, transparent 0);
background-size: 50px 50px;
效果如上图所示，显然这不是我们想要的结果，我们可以生成两层圆点阵列，通过背景定位把他们错开这样就可以得到一个真正的波点图案了。
background: white;
background-image: radial-gradient(rgba(200,0,0,.5) 30%, transparent 0),
radial-gradient(rgba(200,0,0,.5) 30%, transparent 0);
background-size: 50px 50px;
background-position: 0 0, 25px 25px;
最终我们的波点图案就生成了，效果见下图
我实现上图的效果思路是，最先想到使用 background-image ，然后使用 radial-gradient 画圆。再配合默认给个
背景
色，应该差不多可以了。
需要提醒一下，background-image 不单只能插
背景
图，也可以通过代码实现渐变效果（之前遇到一些实习生不清楚这点~）。
于是我做了这几步：
将body的
来源 |https://www.jianshu.com/p/6c0be84baf3a1、实现不等宽
背景
条纹实现如上图所示的效果，代码如下：<html lang="en"><head> <meta charset="UTF-8"> <style type="text/css"> .cont{ ...
上一篇文章中我们学会了如何使用渐变实现条纹状的
背景
，但是实际上条纹
背景
并不是我们能实现的唯一的
背景
图案，利用渐变我们可以实现很多更为
复杂
的图案，本篇会介绍一些其他的简单而实用的
背景
图案。
提示：以下是本篇文章正文内容，下面案例可供参考
网格的原理其实很简单，目前我们已经实现了条纹
背景
，那么如果我们将条纹
背景
组合呢？互相穿插组合，那么是不是很简单就实现了各种各样的网格
背景
。
1. 网格 First Try
代码如下：
复杂
背景
图，如何布局 在项目经常会遇到，产品经理给定了一张
背景
图片，需要在
背景
图指定的位置放入适合的控件，进行展示。今天说下如何使用ConstraintLayout实现布局，ConstraintLayout的基础大家自己搜索下。下面我们先展示一张图片。 给定了这样的一幅图片，你会如何进行布局呢？下面我们开始布局吧。 从图片上我们可以看出，整个图片可以分6部...
