【CSS】波点背景

0009.jpg image.png

CSS代码

background: #655;
background-image: 
    radial-gradient(tan 30%, transparent 0);
background-size: 30px 30px;

首先建立了一个背景色 #655，
用radial-gradient绘制波点。

---

image.png

CSS代码

background: #655;
background-image: 
    radial-gradient(tan 30%, transparent 0),
    radial-gradient(tan 30%, transparent 0);
background-size: 30px 30px;
background-position: 0 0, 15px 15px;

注意：为了达到效果，第二层背景的偏移定位值必须是background-size的一半。

缺点：如果要改变尺寸，要修改的地方就很多。推荐使用CSS预处理器。

---

希望以上笔记对大家有帮助。
我的其他笔记在微信公众号：Rabbit_svip

image.png