Question

我尝试在不使用CSS3的情况下创建实体框阴影类型效果。我受到富文本编辑器的不灵活性的限制，并且需要将所有样式设置为内联

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

我已尽力将其付诸实践：jsfiddle example

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>

Answer 1

除非我遗漏了什么......这应该非常适合你。只需在你的html中插入这个css内联。 http://jsfiddle.net/XfPNB/3/

我们不能使用伪元素（内联css限制我们）。所以，只需在包含所有文本/内容的div中添加一些div。设定位置：相对;在你的顶级div上，然后在你的影子上：

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

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

Answer 2

我能用两个相对的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

使用div创建box-shadow类型效果时遇到问题

2 个答案: