css 如何创建圆点边框？

htrmnn0y 于 2023-10-21 发布在其他

关注(0)|答案(2)|浏览(121)

我试图创建一个圆点边框周围我的内容。举例来说：

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

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

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

我不知道如何避免这个问题，因为图像不无缝平铺。
有没有其他方法可以让我得到不受这些缺陷影响的效果？

css

来源：https://stackoverflow.com/questions/48980036/how-can-i-create-a-polka-dot-border

2条答案

按热度按时间

nwnhqdif1#

你可以很容易地做到这一点与径向梯度作为一个重复的背景，然后调整值取决于高度/宽度的容器：

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

赞(0）回复(0）举报 2023-10-21

p4rjhz4m2#

出现此问题是因为您的背景图像不像屏幕那么宽，并且试图重复。
要纠正这个问题，最简单的解决方案是**background-size: cover。这可以确保图像充满整个屏幕，这意味着它永远不会“环绕”。请注意，这将拉伸图像，使一些失真发生取决于纵横比。
如果失真是一个问题，还有其他两种可能的解决方案：
1.确保图像与您想要显示它的最大屏幕分辨率一样大（最佳情况下，根据视口放大显示图像的大小）
1.制作图像，使其在环绕时完全重叠，然后使用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>

赞(0）回复(0）举报 2023-10-21

我来回答

css 如何创建圆点边框？

2条答案

相关问题

热门标签

最新问答