如何创建圆点边框？

Question

我正在尝试在我的内容周围创建圆点边框。例如：

我已经通过重复图像（两个单独的点）成功实现了这一点。

.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;
}

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

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

我可以采取其他一些方法来达到不受这些错误影响的效果吗？

Answer 1

您可以使用径向渐变作为重复背景轻松地做到这一点，然后根据容器的高度/宽度调整值：

.dots {
  width: 300px;
  height: 200px;
  padding: 60px 70px;
  box-sizing: border-box;
  background: 
   linear-gradient(#fff 0 0) content-box, 
   radial-gradient(circle at 12px 12px, #000 20%, #0000 22%) 12px 2px /33px 50px, 
   radial-gradient(circle at 12px 12px, #000 20%, #0000 22%) 33px 27px/33px 50px;
}

<div class="dots">
  The content here
</div>

Answer 2

出现此问题的原因是您的背景图像没有屏幕那么宽，并且正在尝试重复自身。

要纠正这个问题，最简单的解决方案是

background-size: cover

。这可以确保图像填满整个屏幕，这意味着它永远不会“环绕”。请注意，这会拉伸图像，从而根据宽高比出现一些扭曲。

如果担心失真，还有其他两种可能的解决方案：

1. 确保图像与您想要显示的最大屏幕分辨率一样大（最好根据视口额外放大显示图像的尺寸）
2. 制作图像，使其在环绕时完美重叠，然后使用

   background-repeat

   。

这是

background-size: cover

的示例：

.dots {
  border: 5px solid black; /* For Snippet */
  height: 50vh; /* For Snippet */
  width: 50vw; /* For Snippet */
  background: url('https://upload.wikimedia.org/wikipedia/commons/thumb/6/65/Polka_dots.svg/1200px-Polka_dots.svg.png');
  background-size: cover;
}

<div class="dots"></div>