Html 使用div创建长方体阴影类型效果时出现问题

我试图在不使用CSS3的情况下创建实心长方体阴影类型的效果。我受制于富文本编辑器的死板本性，以及所有样式都要一致的需要

基本上，我需要将一个div放置在另一个div上，稍微向下偏移，然后向右偏移div，并使两者居中并垂直扩展，以我在顶部div中放置的文本量为准

我在这里介绍了我在使其发挥作用方面的最佳尝试：

CSS:

HTML:

<div id="#firstDiv">
  <div id="#secondDiv">
    <div id="#thirdDiv">
      <!--My long Text-->
      <p style="text-align: center">Lorem ipsum ...</p>
      <p style="text-align: center">Lorem ipsum ...</p>
      <p style="text-align: center">Lorem ipsum ...</p>
      <p style="text-align: center">Lorem ipsum ...</p>
      <p style="text-align: center">Lorem ipsum ...</p>
    </div>
  </div>
</div>

Lorem ipsum

Lorem ipsum

Lorem ipsum

Lorem ipsum

Lorem ipsum

我通过两个相对的div实现了您想要的效果：

<div style="width: 70%; margin: 30px auto; position: relative; background-color: #ccc;">

<div style="position: relative; top: -20px; right: 20px; bottom: 20px; left: -20px; padding: 20px; background: #fff; border: 2px solid #ccc;">

---

除非我遗漏了什么……这应该很适合你。只需在html中内联插入此css

我们不能使用伪元素（内联css限制我们）。因此，只需在包含所有文本/内容的div中添加一些div。设定位置：相对位置；在最上面的div上，然后在将成为其阴影的div上：

background: grey;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: -1;

---

基本上确保它与主div的大小完全相同，然后将它放在/it（z-index）下。灰色（或黄色？）背景。那是你的影子。

你问的不太清楚……你能画一张粗糙的画还是什么？@djbhindi他想把他在JSFIDLE中的方块阴影效果扩展到包含当前似乎溢出div的段落。@TylerH Oh。他本可以说^^ ^ ^会更清楚。无论如何，看起来巴德祖斯尼已经做了修复，如果这是他想要的。清理版本：。这就是这种方法所需要的一切。谢谢@bardzusny，我错过了删除一些不必要的风格和由OPAlso应用的东西，这是另一种方法，类似的工作。但这里我们用/content/（text）定位div，而不是仅仅表示阴影的div。去掉边距、填充物，看看会发生什么：

background: grey;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: -1;