如何创建圆点边框？

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

您可以使用径向渐变作为重复背景轻松完成此操作，然后根据容器的高度/宽度调整值：

＆＃13;

＆＃13;

.dots {
  width:300px;
  height:200px;
  padding:60px 70px;
  box-sizing:border-box;
  background:
  linear-gradient(#fff,#fff) 68px 50px/calc(100% - 136px) calc(100% - 100px) no-repeat,
  radial-gradient(circle at 12px 12px,#000 20%, transparent 22%) 12px 2px/33px 50px,
  radial-gradient(circle at 12px 12px,#000 20%, transparent 22%) 33px 27px/33px 50px;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;