使用div创建盒子阴影类型效果时遇到麻烦

user3826340 发表于 Dev

用户名

我试图在不使用CSS3的情况下创建稳定的阴影框效果。我受富文本编辑器不灵活的特性的约束，并且需要将所有样式都内联

本质上，我需要将一个div放置在另一个div上，稍微向下偏移，然后右移div，并使其居中并垂直扩展，并在顶部div中放置一定数量的文本。

我已经尽我最大的努力使它在这里工作：jsfiddle示例

CSS：

#firstDiv {
   clear:left; 
   margin-top:30px; 
   padding: 0 30 0 30;
}

#secondDiv {
   display: table; 
   clear:left; position: relative; 
   margin:auto; 
   width:70%; 
   padding:60 50 60 20; 
   background: #ccc;   
}

#thirdDiv {
   width:100%; 
   position: absolute; 
   top: -20px; 
   bottom: 20px; 
   right: 20px;  
   padding: 20px; 
   background: #fff; 
   border: 2px solid #ccc;
   clear: left;
}

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>

吉列

通过两个相对的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;">

JSFiddle

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。