如何创建圆点边框？答案

【问题标题】：How can I create a polka dot border?如何创建圆点边框？
【发布时间】：2018-02-26 00:46:40
【问题描述】：

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

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

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

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

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

对于不受这些错误影响的效果，我可以采取其他方法吗？

【问题讨论】：

点的缩放是否可以接受？
@ObsidianAge，是的。

标签： html css tile

【解决方案1】：

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

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

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

【讨论】：

【解决方案2】：

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

要纠正这个问题，最简单的解决方案是 background-size: cover。这可以确保图像填满整个屏幕，这意味着它永远不会“环绕”。请注意，这会拉伸图像，从而根据宽高比出现一些失真。

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

确保图像与您要在其上显示的最大屏幕分辨率一样大（最好根据视口另外放大显示图像的大小）
制作图像，使其在环绕时完美重叠，然后使用 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;
}

&lt;div class="dots"&gt;&lt;/div&gt;

【讨论】：