带有底部和顶部阴影的无限行

Question

我需要为行实现阴影.那行没有边距.因此,第1行的底部阴影覆盖第2行的顶部.

我已经创建了一个我需要的jsFiddle示例.

HTML

<div class="row-with-shadow" style="z-index:10"></div>
<div class="row-with-shadow" style="z-index:9"></div>
<div class="row-with-shadow" style="z-index:8"></div>
<div class="row-with-shadow" style="z-index:7"></div>
<div class="row-with-shadow" style="z-index:6"></div>
<div class="row-with-shadow" style="z-index:5"></div>
<div class="row-with-shadow" style="z-index:4"></div>
<div class="row-with-shadow" style="z-index:3"></div>
<div class="row-with-shadow" style="z-index:2"></div>
<div class="row-with-shadow" style="z-index:1"></div>

CSS

.row-with-shadow {
    height:100px;
    margin:0;
    padding:0;    
    border:1px solid #aaa;
    background:#eee;
    box-shadow:0 3px 8px rgba(0,0,0,0.3);
    position:relative;
}

对于没有底部和顶部边距的行,似乎不起作用.？似乎我们必须z-index为每一行添加这种情况.

1行 - z-index 10

2行 - z-idndex 9

...

10行 - z-index 1

但是如果我们有无限的行呢？我们需要js来做吗？如果我们有1000个人怎么办？它可能是z-index 1000将涵盖任何UI元素,如灯箱.

考试http://jsfiddle.net/qh68V/

HTML

<div class="row-with-shadow"></div>
<div class="row-with-shadow"></div>
<div class="row-with-shadow"></div>
<div class="row-with-shadow"></div>
<div class="row-with-shadow"></div>
<div class="row-with-shadow"></div>
<div class="row-with-shadow"></div>
<div class="row-with-shadow"></div>
<div class="row-with-shadow"></div>
<div class="row-with-shadow"></div>

CSS

.row-with-shadow {
    height:100px;
    margin:3px;
    padding:0;    
    border:1px solid #aaa;
    background:#eee;
    box-shadow:0 3px 8px rgba(0,0,0,0.3);
}

Answer 1

您可以通过使用一个:after元素并向其应用阴影来做到这一点。

.row-with-shadow {
    height:100px;
    padding:0;    
    border:1px solid #aaa;
    background:#eee;
    position:relative;
}
.row-with-shadow:after{
   content:'';
   position:absolute;
   top:0;left:0;right:0;bottom:0;
   box-shadow:0 3px 8px rgba(0,0,0,0.3);
   z-index:10;
}

演示地址：http://jsfiddle.net/qh68V/2