如何在CSS中实现此框复制覆盖效果？

Question

我想在CSS中创建这个对话框窗口：

​

​

我设法接近这一点的唯一方法是多次复制对话框窗口，用transform: rotate(..)倾斜它，然后播放一些z索引。

这可以通过边框或框阴影来实现，而不必复制原始的对话框窗口吗？当然，它不一定要出现三次。可能只是一种幻觉。

Answer 1

虽然您可以使用伪元素来避免实际复制元素和一些Z转换来实现这一点，但我认为您不可能只使用边框来完成这一任务：

​

#modal, #modal:before, #modal:after{
  width: 500px;
  height: 300px;
  background: whitesmoke;
  border-radius: 10px;
  box-shadow: 0 0 5px 5px #eee;
  content: " ";
  position: absolute; 
}
#modal:before{
  transform: rotate(-3deg) translateZ(-1px);
}
#modal:after{
  transform: rotate(-6deg) translateZ(-2px);
}
#modal{
  transform-style: preserve-3d;
  position: relative;
  margin: 50px auto; 
}

<div id='modal'></div>

​

这基本上创建了两个伪副本，你的模式，并推动他们背后的原始与略有不同的旋转。