用CSS复制Photoshop转换工具的8个小正方形的最佳方法

我希望我的页面上的一些容器有一个1px的笔划和八个小正方形，就像下面的Photoshop选择工具一样（但中间没有十字）。我想复制这个用正方形装饰的边框，而不是中间空白的蓝色空间，因为我的容器可以包含任何类型的内容和大小

一种解决方案是在容器中创建八个绝对定位的元素，然后分别定位每个元素。另一种解决方案是使用多个背景，但因为我的容器占据了我页面的全部宽度，这就需要创建一个稍微宽一点的包装来承载多个背景。不好，因为不简单

---

有没有更好，或者更简单的解决方案我还没有想到？

如果你不想要很多元素，或者一个复杂的多梯度的方法，这里有另一个使用特殊字符的想法：

.box{
宽度：200px；
高度：200px；
利润率：20px；
背景：线性梯度（浅蓝色，浅蓝色）5px0/calc（100%-10px）100%无重复；
位置：相对位置；
线高：180px；
字母间距：180px；
}
.盒子：以前{
内容：“\25A1\25A1\25A1”；
字母间距：85px；
显示：块；
线高：0px；
}
.盒子：之后{
内容：“\25A1\25A1\25A1”；
位置：绝对位置；
底部：2px；
字母间距：85px；
显示：块；
线高：0px；
}

□□

我会使用边框图像和渐变。。但我会用多重梯度和伪元素得到它，我们感兴趣的是固定像素大小的平方还是百分比大小的平方？另外，您是否希望能够调整/移动元素？正方形的大小是固定的，容器可以是任何大小，可以位于任何位置。谢谢，但我想复制边框上的八个正方形，而不是蓝色的空容器。容器应该包含任何内容，例如段落。所以180px的线高度不起作用。。。我编辑了我的问题以澄清。@drake035我知道：）我只是给出了一个你需要调整的解决方案；）。。180px行高就是一个例子，在这种情况下，您需要找到公式使其通用