Question

我正在尝试为包含2列文字的div设置一个阴影。我有基本结构：

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

并且下面的css看起来应该可以工作，但每当我取消评论背景图片时，无论是在框中还是在伪框中，之前和之后< / em>我想用来创建阴影的框出现在伪框的顶部，尽管我的z-index。我该如何解决这个问题？

编辑：为简单起见没有列，也是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; */ }

Answer 1

如果你将z-index:1;设置为父级，那么它应该允许伪元素位于其下面，而不是在其下面。

Overflow:hidden，会切断它。

position:relative;可以用来设置哪个区域，absolute孩子应该采取协调。

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

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

Answer 2

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

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

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

Answer 3

为什么不把阴影放在.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);
}

当父div具有背景图像时，如何添加框阴影？

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

3 个答案: