CSS背景渐变图案-虚线

我想在上面重新创建背景模式，想知道是否可以通过CSS渐变来实现

我已经设法做了正方形，但是添加虚线很麻烦

background-color: #16A6DA;
background-image: linear-gradient(0deg, transparent 24%, rgba(255, 255, 255, .05) 25%, rgba(255, 255, 255, .05) 26%, transparent 27%, transparent 74%, rgba(255, 255, 255, .05) 75%, rgba(255, 255, 255, .05) 76%, transparent 77%, transparent), linear-gradient(90deg, transparent 24%, rgba(255, 255, 255, .05) 25%, rgba(255, 255, 255, .05) 26%, transparent 27%, transparent 74%, rgba(255, 255, 255, .05) 75%, rgba(255, 255, 255, .05) 76%, transparent 77%, transparent);
background-size:50px 50px;

---

嗯，这不是语义问题，而是你要求的问题。我想：

我创建了许多空div-s，并为这些div添加了边框。使用仅使用HTML和CSS创建的div的边框，这是您所要求的设计

---

可能有些jQuery/Javascript也可以用于“无限”创建新的空div，但我不想使用Javascript，因为这只是一个简单的示例。

我建议您查看以下链接。它们是CSS生成器，可以为您节省一些时间。我希望他们能帮助你

将初始网格应用于html，然后将其应用于身体：

body {
width: 100%;
background-image: linear-gradient(0deg, transparent 24%, rgba(22, 166, 218, 1) 25%, rgba(22, 166, 218, 1) 26%, transparent 27%, transparent 74%, rgba(22, 166, 218, 1) 75%, rgba(22, 166, 218, 1) 76%, transparent 77%, transparent), linear-gradient(90deg, transparent 24%, rgba(22, 166, 218, 1) 25%, rgba(22, 166, 218, 1) 26%, transparent 27%, transparent 74%, rgba(22, 166, 218, 1) 75%, rgba(22, 166, 218, 1) 76%, transparent 77%, transparent);
background-size: 10px 10px;
height: 100%;
}

确保html的宽度和高度设置为100%

基本上，在较小距离（背景尺寸）的白线之上应用蓝线