2

我正在尝试为具有 2 列文本的 div 设置阴影。我有基本结构：

<div class="box>
    <div id="container" class="pseudo-box">
        <p>This is a box</p>
    </div>
</div>

并且下面的css似乎应该可以工作，但是每当我取消注释背景图像时，无论是在框还是伪框中，我想用来创建阴影的前后框都会出现在顶部的伪框，尽管我的 z 索引。我怎样才能解决这个问题？

编辑：为简单起见，没有列，还有 JS Fiddle

http://jsfiddle.net/rzZDD/

.box {
position: absolute;
top: 130px;
left: 0;
right: 0;
min-width: 850px;
bottom: 54px;
overflow: hidden;
/*  background: white url(/u/me/workspace/test2/webdesign/ribbon-horiz.png) top left no-    repeat;
*/ border-bottom: solid thin #aaaaaa;
font-size: 16px;
line-height: 150%;
text-align: left;
z-index: 10;
background: white;
    
    }
    .pseudo-box{
        background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#cbcbcb), color-stop(100%,#bfbfbf)); 
        background: url(/u/me/workspace/test2/webdesign/ribbon-horiz.png) top left no-repeat;
        border: 1px solid #888888;
        border-radius: 6px;
        padding: 10px;    
        position: relative;
    }
    .pseudo-box:before,
    .pseudo-box:after {
       content:"";
       position:absolute;
        z-index: -1;
       bottom: 10px;
       left:10px;
       width:50%;
       height:50%;
       max-width:300px;
       -webkit-box-shadow:0 10px 5px rgba(0, 0, 0, 0.7);
       -moz-box-shadow:0 10px 5px rgba(0, 0, 0, 0.7);
       box-shadow:0 10px 5px rgba(0, 0, 0, 0.7);
       -webkit-transform:rotate(-3deg);
       -moz-transform:rotate(-3deg);
       -o-transform:rotate(-3deg);
       transform:rotate(-3deg);
       background-image: none;
       
    }
    .pseudo-box:after {
       right:10px;
       left:auto;
       -webkit-transform:rotate(3deg);
       -moz-transform:rotate(3deg);
       -o-transform:rotate(3deg);
       transform:rotate(3deg);
    }

  #content {

position: absolute;
left: 20px;
right: 20px;
top: 40px;
bottom: 20px;
min-width: 650px;
padding: 0 10px 0 0;
overflow: auto;    
border-top: thin solid #aaa;
border-bottom: thin solid #aaa;
border-left: thin solid #aaa;
border-right: thin solid #aaa;
border-radius: 4px;  
/*      box-shadow: 4px 4px 9px 2px #aaa;
 */ 
}
4

3 回答 3

1

如果你设置z-index:1;为 parent 它应该允许伪元素在它下面而不是在身体下面。

Overflow:hidden，会断事。

position:relative;可用于从哪个区域设置，absolute孩子应该采取坐标。

http://codepen.io/gcyrillus/pen/sLjEb

解决方案是一个额外的元素粘在盒子的底部，需要半透明。这个额外的元素用溢出在里面绘制阴影，只保留需要的部分。 http://codepen.io/gcyrillus/pen/bxiwL

于 2013-06-24T17:37:48.660 回答
0

解决这个问题的一种方法是提供一个始终带有白色渐变的背景图像，这可以通过以下方式实现：

background-image:-webkit-linear-gradient(top, white 0%, white 100%);

这是一个小提琴：http: //jsfiddle.net/jAg9j/6/

于 2013-06-24T16:49:46.437 回答
0

为什么不把阴影放在 .box 元素上而不是像这样的 .pseudo 盒子上：

.box {
  position: absolute;
  top: 130px;
  left: 0;
  right: 0;
  min-width: 850px;
  bottom: 54px;
  overflow: hidden;
  background: white url(/u/me/workspace/test2/webdesign/ribbon-horiz.png) top left no-repeat;
  border-bottom: solid thin #aaaaaa;
  font-size: 16px;
  line-height: 150%;
  text-align: left;
  z-index: 10;
  background: white;
}
.pseudo-box{
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#cbcbcb), color-stop(100%,#bfbfbf)); 
    /*background: url(/u/me/workspace/test2/webdesign/ribbon-horiz.png) top left no-repeat;*/
    border-radius: 6px;
    padding: 10px; 
    position: absolute;
    left: 20px;
    right: 20px;
    top: 40px;
    bottom: 20px;
    min-width: 650px;
    padding: 0 10px 0 0;
    border-top: thin solid #aaa;
    border-bottom: thin solid #aaa;
    border-left: thin solid #aaa;
    border-right: thin solid #aaa;
    border-radius: 4px; 
}
.box:before,
.box:after {
   content:"";
   display: block;
   position:absolute;
   background:#444;
    z-index: 0;
   bottom: 30px;
   left:40px;
   width:50%;
   height:50%;
   max-width:300px;
   -webkit-box-shadow:0 10px 5px rgba(0, 0, 0, 0.7);
   -moz-box-shadow:0 10px 5px rgba(0, 0, 0, 0.7);
   box-shadow:0 10px 5px rgba(0, 0, 0, 0.7);
   -webkit-transform:rotate(-3deg);
   -moz-transform:rotate(-3deg);
   -o-transform:rotate(-3deg);
   transform:rotate(-3deg);
   background-image: none;

}
.box:after {
   right:40px;
   left:auto;
   -webkit-transform:rotate(3deg);
   -moz-transform:rotate(3deg);
   -o-transform:rotate(3deg);
   transform:rotate(3deg);
}
于 2013-06-24T17:55:17.370 回答