＃div1的影子传播＃div2

我有两个浮动的div。他们足够接近彼此。当我在该div上使用box-shadow时，其中一个阴影会在另一个阴影上展开。我希望他们不要传播他们的阴影。我试过的z-index，没有希望有..＃div1的影子传播＃div2

这里我的代码有云：

<div class="bloklar"> 
    <div></div> 
    <div></div> 
    <div></div> 
    <div></div> 
    <div></div> 
    <div></div> 
</div>

CSS：

.bloklar 
{ 
    padding:0; 
    position:relative; 
    width:1000px; 
} 
.bloklar div 
{ 
    display:block; 
    padding:5px; 
    margin:5px; 
    width:230px; 
    height:280px; 
    background-color:white; 
    float:left; 
    font-size:20px; 
    -webkit-box-shadow: 0px 0px 30px 0px rgba(50, 50, 50, 0.75); 
    -moz-box-shadow: 0px 0px 30px 0px rgba(50, 50, 50, 0.75); 
    z-index:2; 
    box-shadow:   0px 0px 30px 0px rgba(50, 50, 50, 0.75); 
}

干杯。

来源

2014-10-30 m1clee

请演示问题......无法重现基于上述的任何问题。 – 2014-10-30 18:11:38

http://jsfiddle.net/4pc5ckps/在这里你可以看到，我的div的右侧已经从站在他们右侧的div的阴影中生效。 – m1clee 2014-10-30 18:15:43

不......看起来对我很好。也许你可以给我们一个这应该是什么样子的图像？ – 2014-10-30 18:16:45

我会在里面创建一个div来覆盖阴影。试试这个解决方案，它的工作！

HTML

<div class="bloklar"> 
    <div> 
     <div> 
      your content 
     </div> 
    </div> 
    <div> 
     <div> 
      your content 
     </div> 
    </div> 
</div>

CSS

.bloklar { 
    padding: 0; 
    position: relative; 
    width: 1000px; 
} 

.bloklar > div { 
    display: block; 
    margin: 5px; 
    width: 240px; 
    height: 290px; 
    float: left; 
    font-size: 20px; 
    -webkit-box-shadow: 0px 0px 30px 0px rgba(50, 50, 50, 0.75); 
    -moz-box-shadow: 0px 0px 30px 0px rgba(50, 50, 50, 0.75); 
    box-shadow:   0px 0px 30px 0px rgba(50, 50, 50, 0.75); 
} 

.bloklar > div > div { 
    width: 230px; 
    height: 280px; 
    padding: 5px; 
    background-color: #ffffff; 
    z-index: 2; 
    position: absolute; 
}

来源

2014-10-30 18:25:47

它完美的作品，谢谢..我很惊讶，看到那个作品。结论：divs能够切断阴影.. :) – m1clee 2014-10-30 18:30:09

编辑：

下面是根据你想要的解决方案：你想有阴影http://jsfiddle.net/4pc5ckps/4/

添加了DIV内的另一个DIV：

<div class="bloklar"> 
<div class="shadow-container"><div></div></div> 
<div class="shadow-container"><div></div></div> 
<div class="shadow-container"><div></div></div> 
<div class="shadow-container"><div></div></div> 
<div class="shadow-container"><div></div></div> 
<div class="shadow-container"><div></div></div>

然后再去以下CSS：

.bloklar { 
     padding:0; 
     position:relative; 
     width:1000px; 
} 

.bloklar .shadow-container { 
     display:block; 
     margin:5px; 
     width:230px; 
     height:280px; 
     background-color:white; 
     float:left; 
     font-size:20px; 
     -webkit-box-shadow: 0px 0px 30px 0px rgba(50, 50, 50, 0.75); 
     -moz-box-shadow: 0px 0px 30px 0px rgba(50, 50, 50, 0.75); 
     box-shadow:   0px 0px 30px 0px rgba(50, 50, 50, 0.75); 
} 

.bloklar .shadow-container div { 
    background-color: white; 
    padding: 5px; 
    margin: 0px; 
    width: 100%; 
    height: 100%; 
    position: relative; 
    box-sizing: border-box; 
}

来源

2014-10-30 18:12:37 chdltest

感谢您的回答，我希望他们在.bloklar里面都有阴影，但阴影不能影响其他div的内容，目前它的确如此。 http://jsfiddle.net/4pc5ckps/ – m1clee 2014-10-30 18:14:24

我更新了代码。 – chdltest 2014-10-30 18:35:21

是的，谢谢，解决方案是一样的，看起来.. – m1clee 2014-10-30 18:36:38

＃div1的影子传播＃div2

回答

相关问题