css实现好看的背景图（第一弹）

使用经向渐变和线性渐变实现如下效果。

效果图：

 代码实现：

html

<div></div>

css

*{
    margin: 0;
    padding: 0;
}
div{
    width: 100%;
    height: 100vh;
    background:
    radial-gradient(circle, transparent 20%, slategray 20%, slategray 80%, transparent 80%, transparent),
    radial-gradient(circle, transparent 20%, slategray 20%, slategray 80%, transparent 80%, transparent) 50px 50px,
    linear-gradient(#A8B1BB 8px, transparent 8px) 0 -4px,
    linear-gradient(90deg, #A8B1BB 8px, transparent 8px) -4px 0;
    background-color: slategray;
    background-size:100px 100px, 100px 100px, 50px 50px, 50px 50px;
}