css - 模拟纸张的div多重边框

Question

我正在尝试制作一个带有装饰边框的 div。这个 div 应该是:

• react 灵敏
• 对调整大小操作使用react
• 并根据嵌入的图像调整它的高度和宽度

我已经想到的是这个 fiddle 示例，最终的解决方案看起来应该完全像这样:

.stack {
  margin-top: 50px;
}

.c1 {
  position: absolute;
  z-index: 10;
  border: 1px solid black;
  width: 300px;
  height: 300px;
  background: red;
}

.c1 img {
  width: 300px;
}

.c2 {
  position: absolute;
  z-index: 5;
  background: bluex;
  border-top: 1px solid black;
  border-right: 1px solid black;
  margin-top: -5px;
  margin-left: 6px;
  width: 300px;
  height: 300px;
}

.c3 {
  position: absolute;
  z-index: 1;
  background: yellowx;
  border-top: 1px solid black;
  border-right: 1px solid black;
  margin-top: -10px;
  margin-left: 11px;
  width: 300px;
  height: 300px;
}

<div class="stack">
  <div class="c1">
    <img src="https://dummyimage.com/300.png/09f/fff" />
  </div>
  <div class="c2"></div>
  <div class="c3"></div>
</div>

谁能帮我扩展或重建它以满足其他要求。

Answer 1

你可以尝试多个box-shadow

img {
  border: 2px solid;
  margin: 20px;
  box-shadow:
    6px -6px 0 #fff,
    8px -8px 0 #000,
    12px -12px 0 #fff,
    14px -14px 0 #000;
}

<img src="https://dummyimage.com/300.png/09f/fff" />