Question

我正在尝试为内容设置阴影效果，我可以设置它。但是我用相邻的元素覆盖，这会扰乱外观。有没有办法去除特定区域的叠加效果（图像中的红色圆圈）？请检查下面的示例图片。

sample image

HTML：

<div id="container">
    <div id="table1">
        <table>
            <tr><td>AAA</td></tr>
            <tr><td>BBB</td></tr>
            <tr><td>CCC</td></tr>            
        </table>
    </div>
    <div id="table2"  class="Shadow">
        <table>
            <tr><td>aaa</td><td>eee</td></tr>
            <tr><td>bbb</td><td>fff</td></tr>
            <tr><td>ccc</td><td>ggg</td></tr>
            <tr><td>ddd</td><td>hhh</td></tr>
        </table>
    </div>
</div>

CSS：

#container {    
    position: relative;
}
table,td,tr{
    border:1px solid black;
}
#table1{    
    position: absolute;     
}
#table2{    
    position:absolute;
    background-color:pink;
    margin-left:40px;
}
.Shadow{
-webkit-box-shadow: 0 0 30px 9px #476FCC;
box-shadow: 0 0 30px 9px #476FCC;
}

JS小提琴链接：http://jsfiddle.net/5JYPm/13/

Answer 1

我认为你最接近的是将第一张桌子堆叠在第二张桌子上，并确保你有背景颜色：

#table1{    
    position: absolute;     
    z-index:2;
    background-color:#fff;
}
#table2{    
    position:absolute;
    background-color:pink;
    margin-left:40px;
    z-index:1;
}

http://jsfiddle.net/5JYPm/16/

Answer 2

您需要更改表格的z-index，然后为table1添加背景颜色

Example

Answer 3

将框阴影调整到右边大约一半的范围？

.Shadow{
box-shadow: 15px 0 30px 0px #476FCC;
}

JSfiddle

Answer 4

<div id="table2" style="z-index:-1;" class="shadow">

如何避免在CSS3中一侧覆盖阴影

4 个答案: