Question

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

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

Answer 2

您可以改为使用渐变背景。这样可以更好地控制效果。

添加以下样式似乎效果很好，但它没有正确处理第一行。

border-top:1px solid #808080;
background: linear-gradient(to bottom, #bcbcbc 0%,#eee 6%,#eee 100%);

要修复第一行，您需要以下样式：

.row-with-shadow:first-child{
    background:#eee;
}

以下是一个实例：http://jsfiddle.net/qh68V/7/

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

2 个答案: