我正在尝试在我的内容周围创建一个圆点边框。例如:
我已经设法通过重复(两个单独的点)图像来实现这一点。
.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;
}
然而,这是一个不完美的结果。在某些尺寸上,点将开始重叠。
我不确定如何避免这个问题,因为图像不是无缝平铺的。
我是否可以采用其他一些方法来获得不受这些错误影响的效果?
最佳答案
您可以轻松地使用径向渐变作为重复背景,然后根据容器的高度/宽度调整值:
.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>
关于html - 如何创建圆点边框?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48980036/