如何創建圓點邊框？

Question

我想在我的內容周圍創建一個圓點邊框。 例如：

我已經設法通過重復一個圖像（兩個單獨的點）來實現這一點。

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

然而，這是一個不完美的結果。 在某些尺寸上，點將開始重疊。

我不確定如何避免這個問題，因為圖像沒有無縫平鋪。

是否有其他方法我可以采取不受這些故障影響的效果？

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

Answer 2

問題出現是因為您的背景圖像不像屏幕那么寬，並且正在嘗試重復自己。

要糾正這個問題，最簡單的解決方案是background-size: cover 。 這可以確保圖像填滿整個屏幕，這意味着它永遠不會“環繞”。 請注意，這將拉伸圖像，以便根據縱橫比發生一些失真。

如果擔心失真，還有其他兩種可能的解決方案：

1. 確保圖像與要顯示的最大屏幕分辨率一樣大（最好根據視口另外放大顯示圖像的大小）
2. 制作圖像，使其在環繞時完全重疊，然后使用background-repeat 。

以下是background-size: cover的示例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>