如何创建圆点边框?

问题描述 投票:0回答:2

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

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

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

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

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

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

html css tile
2个回答
2
投票

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

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


1
投票

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

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

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>

© www.soinside.com 2019 - 2024. All rights reserved.