复杂背景——波点

波点背景

我们首先使用径向渐变创建一个圆点阵列

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;

最终我们的波点图案就生成了，效果见下图