Question

我在向块元素列表中添加阴影时遇到了一些问题。在这种情况下，Div具有背景颜色，它覆盖了上面div的阴影。为了解决这个问题，我减少了每个元素的z-index，但这不是一个有效的解决方案。

您如何在纯html / css中以更好的方式解决此问题？你会如何使用Twitter bootstrap来解决这个问题？

这是我的测试代码HTML / CSS

<div class="container" style="z-index:10">
    <h1>Box 1</h1>
 </div>
 <div class="container" style="z-index:5">
    <h1>Box 2</h1>
 </div>
 <div class="container" style="z-index:0">
    <h1>Box 3</h1>
 </div>


h1{margin:0;}
.container{
    background-color: yellow;
    margin: 0;
    padding: 0;
    -webkit-box-shadow: 0px 2px 6px 0px rgba(50, 50, 50, 0.75);
    -moz-box-shadow:    0px 1px 3px 0px rgba(50, 50, 50, 0.75);
    box-shadow:    0px 1px 3px 0px rgba(50, 50, 50, 0.75);
}

感谢您的帮助

编辑： http://jsfiddle.net/42816g0x/5/

一些澄清： - 阴影需要在div.container

上

div应该能够有不同的bg颜色，例如每个奇数div
div.container的数量可能会有所不同，我不想在每个
上手动添加z-index

编辑2：我想出了一个我认为最好的解决方案，我不需要手动摆弄z-index，（因为它们是通过x nr项动态添加的，不同时间的次数）。相反，我使用伪类::之前在顶部添加阴影。

.container::before{
    width: 100%;
    height: 5px;
    content:"";
    position: absolute;
    top: 0;
    left:0;
    background: -moz-linear-gradient(top,  rgba(0,0,0,0.34) 0%, rgba(0,0,0,0) 58%, rgba(0,0,0,0) 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,0,0,0.34)), color-stop(58%,rgba(0,0,0,0)), color-stop(100%,rgba(0,0,0,0))); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top,  rgba(0,0,0,0.34) 0%,rgba(0,0,0,0) 58%,rgba(0,0,0,0) 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top,  rgba(0,0,0,0.34) 0%,rgba(0,0,0,0) 58%,rgba(0,0,0,0) 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top,  rgba(0,0,0,0.34) 0%,rgba(0,0,0,0) 58%,rgba(0,0,0,0) 100%); /* IE10+ */
    background: linear-gradient(to bottom,  rgba(0,0,0,0.34) 0%,rgba(0,0,0,0) 58%,rgba(0,0,0,0) 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#57000000', endColorstr='#00000000',GradientType=0 ); /* IE6-9 */
}

Answer 1

试试这个。我在css和html中做了一些更改。

＆＃13;

   h1{margin:0;
 -webkit-box-shadow: 0px 2px 6px 0px rgba(50, 50, 50, 0.75);
    -moz-box-shadow:    0px 1px 3px 0px rgba(50, 50, 50, 0.75);
    box-shadow:    0px 1px 3px 0px rgba(50, 50, 50, 0.75);
}
.container{
    background-color: yellow;
    margin: 0;
    padding: 0;
    -webkit-box-shadow: 0px 2px 6px 0px rgba(50, 50, 50, 0.75);
    -moz-box-shadow:    0px 1px 3px 0px rgba(50, 50, 50, 0.75);
    box-shadow:    0px 1px 3px 0px rgba(50, 50, 50, 0.75);
}

＆＃13;

 <div class="container">
    <h1>Box 1</h1>
    <h1>Box 2</h1>
    <h1>Box 3</h1>
 </div>

＆＃13;

使用 Twitter bootstrap ，请检查以下内容： fiddle

编辑：好的，你得到了解决方案。这很好。这是您的第一个编辑问题的另一个选项。 DEMO这是使用jquery。您可以添加以下脚本代码和jquery，jquery UI，如DEMO中所示。您无需手动添加z-index。 z-index可以应用于多个div。

$(function() {
    var boxes = $("div");
    var z = 4;
        boxes.each(function() {
            $(this).zIndex(z--);
        });
});

Answer 2

jsfiddle

只需添加位置：相对于z-index适合您：

.container{
position:relative;
background-color: yellow;
margin: 0;
padding: 0;
-webkit-box-shadow: 0px 2px 6px 0px rgba(50, 50, 50, 0.75);
-moz-box-shadow:    0px 1px 3px 0px rgba(50, 50, 50, 0.75);
box-shadow:    0px 1px 3px 0px rgba(50, 50, 50, 0.75);
 }

Answer 3

我们将以伪元素渲染阴影（可以是WebSecurity.Login(userName, password, persistCookie)或before，都没有关系），并为其分配负的z-index。

after

有关详细信息-Tutorial Here。

Answer 4

更改此

的css代码

＆＃13;

h1{margin:0;}
.container{
    background-color: yellow;
    margin: 0;
    padding: 0;
    -webkit-box-shadow: 0px 3px 3px 0px rgba(50, 50, 50, 0.75);
    -moz-box-shadow: 0px 3px 3px 0px rgba(50, 50, 50, 0.75);
    box-shadow: 0px 3px 3px 0px rgba(50, 50, 50, 0.75);
}

＆＃13;

<div class="container">
    <h1>Box 1</h1>
 </div>
 <div class="container">
    <h1>Box 2</h1>
 </div>
 <div class="container">
    <h1>Box 3</h1>
 </div>

＆＃13;

由div背景覆盖的box-shadow

4 个答案: