css - 每当内容变大时，CSS/图像的多个边框/边缘必须重复

Question

我想做这样的东西

你能看到边缘有 3 个边框吗？有一种风格，我怎么做这样的东西？

我有一个计划，

裁剪内容的头部，

裁剪内容区域，

并裁剪内容的页脚

所以中间部分会随着内容重复，但我不确定如何制作。

有任何想法吗？

Answer 1

您可以使用 div、边框和绝对定位来实现。

演示

只需绝对定位 div 并稍微更改顶部/左侧

div {
  border: 1px solid #aaa;
  width: 300px;
  height: 200px;
  background: white;
  position: absolute;
}
#first{
  top: 6px;
  left: 6px; 
}
#second{
  top: 3px;
  left: 3px;
}