css - コンテンツが大きくなるたびに、CSS/画像の複数の境界線/エッジを繰り返す必要があります

Question

私はこのようなものを作りたい

エッジに 3 つの境界線があることがわかりますか? スタイルで、どうすればこれとまったく同じものを作ることができますか?

私は計画を立てました、

コンテンツの頭を切り取り、

コンテンツ領域をトリミングし、

コンテンツのフッターを切り取ります

したがって、中間部分はコンテンツで繰り返されますが、これを作成する方法がわかりません.

何か案は？

Answer 1

div、border、および絶対配置でそれを行うことができます。

デモ

divを絶対に配置し、上/左をわずかに変更するだけです

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