：之後和：之前崩潰？

參考：http://www.stephenkelzer.com/design.html
優化的Firefox只有到目前爲止（可能會發現額外的錯誤，如果觀看在其他瀏覽器：之後和：之前崩潰？

- 第一個時間海報傢伙，我真的可以使用一些幫助在此，感謝

！

我在這裏建立一個非常簡單的投資組合頁面，我打算以後就可以擴大

我想一個層次分明的效果添加到每個模塊像克里斯Coyier他的網站做的：。http://css-tricks.com/

我已經做了層綠色和黃色，以幫助他們脫穎而出

HTML標記：

<div id="mh-com" class="abc portmodule"> 
    <div class="portmoduleimg"></div> 
     <div class="portmoduleinfo"> 
      <h3><a href="http://www.marlonheimerl.com/" rel="nofollow">MarlonHeimerl.com</a></h3> 
      <p>...</p> 
     </div> 
    </div> 
<div id="business-template" class="zxc portmodule"> 
    <div class="portmoduleimg"></div> 
     <div class="portmoduleinfo"> 
      <h3><a href="" rel="nofollow">Business Template</a></h3> 
      <p>...</p> 
     </div> 
    </div>

CSS標記：

.portmodule { 
margin-top: 25px; 
height:300px; 
overflow: hidden; 
width:969px; 
background-color:rgb(98, 109, 111); 
color: rgb(192,204,206); 
} 
.portmodule:after, .portmodule:before { 
content:""; 
position: absolute; 
top:6px; 
left:6px; 
background-color: green; 
width:100%; 
height:100%; 
z-index: -1; 
} 
.portmodule:before { 
top:12px; 
left:12px; 
background-color: yellow; 
}

我想使其成爲每個單獨的模塊都具有分層效果。我希望你們能幫助我！謝謝！

來源

2013-03-05 StephenKelzer

什麼是毛刺？在我的Firefox和Chrome中正確顯示。你只是想像CSS陰影一樣添加深度？ – 2013-03-05 05:04:12

順便說一句，這是一個jsfiddle。 http://jsfiddle.net/qjWbu/請在你的帖子中使用這些。正如你所看到的，所提供的代碼對我們無能爲力。這裏的人很快就可以投票了，所以你需要問清楚Q和A風格的問題以避免它們。 – 2013-03-05 05:08:56

我的目標是讓每個模塊都有自己的'：before'和'：after'圖層。換言之，我希望在這兩個模塊之間有綠色和黃色的顏色。：before＆：在代碼鏈接到2個單獨的「.portmodule」類之後，因此應該分別顯示兩次，而是將它們合併爲一個高：before：after元素。 – StephenKelzer 2013-03-05 05:11:00

http://www.codepen.io/thestevekelzer/pen/ibmta

我發現了一個「次要的解決方案」 ...... 我的意思是，我不認爲這是一個首選的方法。

看來，絕對定位之前：在&之後：僞元素都是基於父元素，而不是像我想的子元素。你會注意到我的分叉codepen，我已經增加了'業務模板'元素的最高調整，以適應頁面上較低。

如果有人知道更簡單的解決方案，我仍然會喜歡它。謝謝！！！

來源

2013-03-05 15:33:34 StephenKelzer

：之後和：之前崩潰？

回答

相關問題