溢出隱藏和清除：兩個去除紙張效果陰影

我想創建一個紙張效果陰影使用下面的CSS，但我有3個div在這個div需要並排。我使用float來並排製作div，但這會使父級的div高度小於內部內容。我試過清楚：both和overflow：hidden來解決使高度相對於內容的問題，但是這消除了陰影效應。溢出隱藏和清除：兩個去除紙張效果陰影

CSS

.boxcontainer { 
    position:relative; 
    width:90%; 
} 

.boxcontainer:before, 
.boxcontainer:after { 
    content:""; 
    position:absolute; 
    z-index:-1; 
    bottom:15px; 
    left:10px; 
    width:50%; 
    height:20%; 
    max-width:300px; 
    -webkit-box-shadow:0 15px 10px rgba(0, 0, 0, 0.7); 
    -moz-box-shadow:0 15px 10px rgba(0, 0, 0, 0.7); 
    box-shadow:0 15px 10px rgba(0, 0, 0, 0.7); 
    -webkit-transform:rotate(-3deg); 
    -moz-transform:rotate(-3deg); 
    -o-transform:rotate(-3deg); 
    transform:rotate(-3deg); 
} 

.boxcontainer:after{ 
    right:10px; 
    left:auto; 
    -webkit-transform:rotate(3deg); 
    -moz-transform:rotate(3deg); 
    -o-transform:rotate(3deg); 
    transform:rotate(3deg); 
}

HTML

<div id="paperbox" class="boxcontainer"> 
    <img class="mafacemobile" src="/images/maface.jpeg" alt="ma face" width="183px" height="183px"> 
    <div id="textwrapper"> 
    <h1> 
    FILLING MORE TEX 
     </h1> 
<div id="icons" 
<img...> 
     </div> 
</div> 
</div>

來源

2013-03-11 Conrad C

你的代碼中沒有'.drop-shadow'類的元素嗎？ – polybios 2013-03-11 17:49:59

對不起，我在發佈之前更改了類名。我將編輯帖子 – 2013-03-11 17:53:48

我不是100％肯定的正是你心中的最終結果有什麼由於您提供的最少的代碼是一個好主意，但希望這是接近！

看看我的鋼筆工作模式：http://codepen.io/gnowland/pen/crGtE

...這是最終代碼：

HTML

<div id="paperbox" class="boxcontainer"> 
    <div class="boxinner"> 
    <img style="-webkit-user-select: none" src="http://placehold.it/183x183" class="mafacemobile" alt="ma face" width="183px" height="183px"> 
    <div id="textwrapper"> 
     <h1>FILLING MORE TEXT</h1> 
     <div id="icons"><img style="-webkit-user-select: none" src="http://placehold.it/50"></div> 
    </div> 
    </div> 
</div>

CSS

.boxcontainer { 
    margin: 10px; 
    display: inline-block; 
    position: relative; 
    background-color: #fff; 
    z-index: -1; 
} 
.boxcontainer:before { 
    content:""; 
    position:absolute; 
    bottom:0; 
    left:0; 
    width:100%; 
    height:100%; 
    background-color: #fff; 
    -webkit-box-shadow:0 15px 10px rgba(0, 0, 0, 0.7); 
    -moz-box-shadow:0 15px 10px rgba(0, 0, 0, 0.7); 
    box-shadow:0 15px 10px rgba(0, 0, 0, 0.7); 
    -webkit-transform:rotate(-3deg); 
    -moz-transform:rotate(-3deg); 
    -o-transform:rotate(-3deg); 
    transform:rotate(-3deg); 
} 
.boxcontainer:after { 
    content:""; 
    position:absolute; 
    bottom:0; 
    left:0; 
    width:100%; 
    height:100%; 
    background-color: #fff; 
    -webkit-box-shadow:0 15px 10px rgba(0, 0, 0, 0.7); 
    -moz-box-shadow:0 15px 10px rgba(0, 0, 0, 0.7); 
    box-shadow:0 15px 10px rgba(0, 0, 0, 0.7); 
    -webkit-transform:rotate(3deg); 
    -moz-transform:rotate(3deg); 
    -o-transform:rotate(3deg); 
    transform:rotate(3deg); 
} 

.boxinner{ 
    position: relative; 
    padding: 20px; 
    z-index: 1; 
} 

.boxinner > * { 
    /* NOTE: This is just for demo, utilize the exact selectors in your code */ 
    display: inline-block; 
    padding: 2px 
}

我用你.boxcontainer作爲包裝和主要投入時使用display: inline-block加入內格（.boxinner）持有的內容，所以你可以墊吧，等

。與該物業友好，這是真棒。

你可以在codepen上玩我的代碼，並讓我知道你是否有任何後續問題。

希望這解決了它給你！ :-)

編輯：我剛剛意識到你原來的問題是從7個月前...你可能已經找到它了，但希望這可以幫助別人。

來源

2014-10-10 00:16:30

嘗試增加position:relative到.boxcontainer

你能提供.boxcontainer CSS和它的內容，也？而且，哪個容器被.drop-shadow應用於？

這將是建立一個jsfiddle

來源

2013-03-11 17:52:04 Bill

對不起，我犯了一個錯字。現在已經修復了。 – 2013-03-11 17:55:20

溢出隱藏和清除：兩個去除紙張效果陰影

回答

相關問題