我有两个浮动的div。他们彼此足够接近。当我在div上使用box-shadow时,其中一个阴影会在另一个上传播。我希望他们不要在他们的阴影上蔓延。我已经尝试过z-index,没有希望......
我的代码在这里:
<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);
}
干杯。
答案 0 :(得分:1)
编辑:
以下是基于您想要的解决方案: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;
}
答案 1 :(得分: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;
}