html - 具有底部和顶部阴影的无限行

Question

我需要为行添加阴影。那行没有边距。所以第 1 行的底部阴影覆盖了第 2 行的顶部。

我创建了一个 jsFiddle example of what I need.

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