Html 如何创建圆点边框？

我试图在我的内容周围创建一个圆点边框。例如：

我通过重复（两个单独的点）的图像来实现这一点

然而，这是一个不完美的结果。在某些尺寸上，点将开始重叠

我不知道如何避免这个问题，因为图像不能无缝平铺

---

有没有其他方法可以使效果不受这些故障的影响？

问题的出现是因为您的背景图像没有屏幕宽，并且试图重复自身

要纠正这一点，最简单的解决方案是。这确保了图像填充整个屏幕，这意味着它永远不会“环绕”。请注意，这将拉伸图像，从而根据纵横比发生一些失真

如果存在失真问题，则有其他两种可能的解决方案：

确保图像的大小与要在其上显示的最大屏幕分辨率相同（根据视口以最佳方式进一步放大显示图像的大小）

制作图像，使其在环绕时完全重叠，然后使用

以下是

背景尺寸：封面
的示例：


.dots{
边框：5px纯黑；/*表示代码段*/
高度：50vh；/*用于片段*/
宽度：50vw；/*用于代码段*/
背景：url（'https://upload.wikimedia.org/wikipedia/commons/thumb/6/65/Polka_dots.svg/1200px-Polka_dots.svg.png');
背景尺寸：封面；
}
您可以轻松地将径向渐变作为重复背景，然后根据容器的高度/宽度调整值：


.dots{
宽度：300px；
高度：200px；
填充：60px 70px；
框大小：边框框；
背景：
线性梯度（#fff，#fff）68px 50px/计算（100%-136px）计算（100%-100px）无重复，
径向梯度（12px 12px处的圆圈，#000 20%，透明22%）12px 2px/33px 50px，
径向梯度（12px 12px处的圆圈，#000 20%，透明22%）33px 27px/33px 50px；
}

这里的内容
点的缩放是否可以接受？@obsidiange，可以。
.dots {
    background: url('/images/dots.png'), url('/images/dots.png'), url('/images/dots.png'), url('/images/dots.png');
    background-repeat: repeat-y, repeat-y, repeat-x, repeat-x;
    background-position: right top, left top, right top, right bottom;
}