＃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

回答

相關問題