# тень div1 распространяется на # div2

Question

У меня есть два плавающих divs. Они достаточно близки друг к другу. Когда я использую box-shadow для этих divs, одна из теней распространяется на другую. Я хочу, чтобы они НЕ распространялись по их теням. Я пробовал Z-индекс, нет надежды там ..

Вот мой код идет:

<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); 
} 

Приветствия.

Answer 1

Я бы создал 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; 
} 

Answer 2

Edit:

Вот решение, основанное на том, что вы хотите: 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; 
}