如何创建圆点边框?
How can I create a polka dot border?
我正在尝试在我的内容周围创建圆点边框。例如:
我已经通过重复图像(两个单独的点)设法实现了这一点。
.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;
}
然而这是一个不完美的结果。在某些尺寸上,点将开始重叠。
我不确定如何避免这个问题,因为图像不是无缝平铺的。
我是否可以采用其他方法来实现不受这些错误影响的效果?
出现此问题是因为您的背景图像没有屏幕那么宽,并且试图自行重复。
要更正此问题,最简单的解决方案是 background-size: cover
。这确保图像充满整个屏幕,这意味着它永远不会 'wrap around'。请注意,这将拉伸图像,以便根据宽高比发生一些变形。
如果担心失真,还有其他两种可能的解决方案:
- 确保图像与您要显示它的最大屏幕分辨率一样大(根据视口最佳地额外放大显示图像的大小)
- 制作图像,使其在环绕时完全重叠,然后利用
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>
您可以轻松地使用 radial-gradient 作为重复背景,然后根据容器的 height/width 调整值:
.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>
我正在尝试在我的内容周围创建圆点边框。例如:
我已经通过重复图像(两个单独的点)设法实现了这一点。
.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;
}
然而这是一个不完美的结果。在某些尺寸上,点将开始重叠。
我不确定如何避免这个问题,因为图像不是无缝平铺的。
我是否可以采用其他方法来实现不受这些错误影响的效果?
出现此问题是因为您的背景图像没有屏幕那么宽,并且试图自行重复。
要更正此问题,最简单的解决方案是 background-size: cover
。这确保图像充满整个屏幕,这意味着它永远不会 'wrap around'。请注意,这将拉伸图像,以便根据宽高比发生一些变形。
如果担心失真,还有其他两种可能的解决方案:
- 确保图像与您要显示它的最大屏幕分辨率一样大(根据视口最佳地额外放大显示图像的大小)
- 制作图像,使其在环绕时完全重叠,然后利用
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>
您可以轻松地使用 radial-gradient 作为重复背景,然后根据容器的 height/width 调整值:
.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>