#div1的阴影在#div2上传播

时间:2014-10-30 18:06:43

标签: html css shadow spread

我有两个浮动的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);
}

干杯。

2 个答案:

答案 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;
}