这次要用纯CSS做一个波点背景，先上图看看效果。
我把这个效果写在 body 上，如果你不喜欢这个配色也可以自己手动改改。nn
n
nn# 思路nn我实现上图的效果思路是，最先想到使用 background-image ，然后使用 radial-gradient 画圆。再配合默认给个背景色，应该差不多可以了。nn需要提醒一下，background-image 不单只能插背景图，也可以通过代码实现渐变效果（之前遇到一些实习生不清楚这点~）。nn于是我做了这几步：nn1. 将body的宽高设为 100%n1. 将 margin 设为 0n1. 设置默认背景色 background-colorn1. 设置圆形背景 background-image: radial-gradientnn于是代码变成这样nnn<style>n body {n width: 100%;n height: 100%;n margin: 0;n background-color: #655;n background-image: radial-gradient(#f5dab8 30%, transparent 0);n background-size: 60px 60px;n }n</style>nnnn
我使用 background-size 设置波点的大小。你可以根据自己项目实际需求来设置。nn是有一点效果了，但此时的波点是横竖有序排列的。我希望这些波点能错开排列。nn于是我又想到，可以做多一层波点，然后使用 background-position 将2层波点错开排列。nn为了让错开排列后还是保持着整齐的感觉，所以我用的技巧是错开的距离是波点的一半大小。nn也就是说，background-position = background-size / 2 。当然，这句是伪代码。nn改进后的代码添加了两句：n/* 省略部分代码 */nbackground-image:n radial-gradient(#f5dab8 30%, transparent 0),n radial-gradient(#f5dab8 30%, transparent 0);nbackground-size: 60px 60px;nbackground-position: 0 0, 30px 30px;nbackground-image 里有2层 radial-gradient，background-position 也分别设置了每一层的位置。nn最终效果如下所示nnn
完整代码n<style>n body {n width: 100%;n height: 100%;n margin: 0;n background-color: #655;n background-image:n radial-gradient(#f5dab8 30%, transparent 0),n radial-gradient(#f5dab8 30%, transparent 0);n background-size: 60px 60px;n background-position: 0 0, 30px 30px;n }n</style>n
