框陰影被切斷

雖然使用CSS3的box-shadow我有一個問題，我通常沒有。框陰影被切斷

盒子的陰影通常只是流過div邊緣，但不是在這個邊緣上。

box-shadow正被切斷的頂部和右側..

繼承人我使用的box-shadow的CSS：

-moz-box-shadow: 0 0 5px #555; 
-webkit-box-shadow: 0 0 5px #555; 
box-shadow: 0 0 5px #555;

乾杯

如果box-shadow正在被切斷，確保overflow:visible設置你的元素被包含在任何股利（或多個）。

2012-10-03 17:22:36

我拿出原文中的示例網站鏈接，所以我將這個解釋留給將來有這個問題的人。 –

的問題是你的中心主體div正在從影子邊緣切下。對此設置overflow:visible，你應該看到它。

2012-10-03 17:16:50 quoo

謝謝，我認爲這是問題，但我沒有看到這一個。你太棒了。 –

樂意幫忙:) – quoo

您可以設置顯示陰影盒正確

.img{ 
    margin:20px; 
-moz-box-shadow: 0 0 5px #555; 
    -webkit-box-shadow: 0 0 5px #555; 
    box-shadow: 0 0 5px #555; 
}

這種風格img標籤

2012-10-03 17:26:01 Afshin

這當然會改變圖像的位置。 – quoo

我已經多次遇到這個問題與IE瀏覽器，我發現最好的解決方案是圍繞div使用透明的輪廓。這似乎阻止IE剪裁盒子的陰影，因爲即使在Gecko和Webkit沒有的情況下也是如此。使用大綱來解決這個問題的一個好處是它不會影響div的位置。

例如，我曾與我曾使用位置一個div：絕對和底部：-30px把它在某些相對於其父格的地方。 IE瀏覽器，只有IE瀏覽器，切斷了盒子陰影的頂部和底部。添加這個大綱修正了它，而不改變位置。

outline: 10px solid transparent;

2014-09-24 04:57:38 CSX321

回答