[英]#div1's shadow spreads on #div2
I have two floated divs. 我有两个浮动div。 They are close enough to each other.
它们彼此足够接近。 When I use box-shadow on that divs, one of the shadows spreads on the other one.
当我在该div上使用box-shadow时,其中一个阴影会扩散到另一个阴影上。 I want them NOT to spread on their shadows.
我希望他们不要在阴影中散布。 I've tried z-index, no hope there..
我尝试过z-index,那里没有希望。
Here my code goes: 我的代码在这里:
<div class="bloklar">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
CSS: 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);
}
Cheers. 干杯。
Edit: 编辑:
Here's the solution based on what you want: http://jsfiddle.net/4pc5ckps/4/ 这是根据您想要的解决方案: http : //jsfiddle.net/4pc5ckps/4/
Added another div inside the div you wanted to have shadows: 在要具有阴影的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>
Then gave the following CSS: 然后给出以下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;
}
I would create a div inside that is going to cover the shadow. 我会在内部创建一个div来覆盖阴影。 Try this solution, it's working!
试试这个解决方案,它正在工作!
HTML 的HTML
<div class="bloklar">
<div>
<div>
your content
</div>
</div>
<div>
<div>
your content
</div>
</div>
</div>
CSS 的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;
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.