分別設置盒子的陰影高度和寬度？

我需要創建一個div，在任何一方和底部都保持動態數量的內容，而且頂部沒有。我還需要兩側的陰影銳利地出現在div上，並且陰影不會彼此重疊，從而使特定區域的陰影變暗。
例這裏：
http://jsfiddle.net/EdwardG_Jones/TBfWm/

我已經嘗試了以下方式，它的工作原理，但它不覆蓋的角落，而不是一個瞬間轉變，而一個漸進的梯度消失：
http://jsfiddle.net/EdwardG_Jones/WC2ja/2/分別設置盒子的陰影高度和寬度？

box-shadow: 12px 5px 5px -10px rgba(50, 50, 50, 0.75), -12px 5px 5px -10px rgba(50, 50, 50, 0.75), 0 7px 5px -5px rgba(50, 50, 50, 0.75);

我可能會最終使用的圖像底部梯度並以某種方式創建另一個格在頂部上的陰影的頂部位於隱藏它不隱藏內容。不知道我該怎麼做。特別是在drupal中，意味着它更難以手動硬編碼div。

來源

2013-09-23 Edward G-Jones

或者做任何您需要的操作來使底部，左側和右側邊框看起來正確，然後用這個hacky代碼隱藏頂部邊框：

div{ 
    margin: 20px; 
    width: 200px; 
    height: 400px; 
    box-shadow: 0px 0px 5px rgba(50, 50, 50, 0.75) 
} 
div:before{ 
    content: ""; 
    width: 200px; 
    height: 5px; 
    background: white; 
    position: absolute; 
    margin-top: -6px; 
}

Fiddle。

然後覺得使用它真的很內疚。

來源

2013-09-23 12:20:57 Jazcash

嗯，我試着把你的代碼放到小提琴中，但它似乎沒有工作。你能鏈接一個工作演示嗎？你也可以解釋發生了什麼/爲什麼它起作用？ –

我的壞，粘貼粘貼，現在修復。也增加了一個JSFiddle鏈接。它所做的只是將一個盒子放在div上方（覆蓋它），以純白色來簡單地「隱藏」下面的陰影。這很不好，因爲它沒有真正解決根本問題，它只是掩蓋了錯誤。但它的作品！：P – Jazcash

好吧，如果我想擺脫頂部的陰影，但是：P我需要兩側的陰影只顯示在div的下方，而不是在頂部。如果你願意的話，漸變也會圍繞：之前，創建一些「喇叭」。 –

分別設置盒子的陰影高度和寬度？

回答

相關問題