如何創建一個完整的CSS盒陰影，而不是剪輯

試驗CSS3的盒子陰影屬性，我想知道如果你可以防止對象投它去剪影。在下面的代碼中，DIV投射陰影是不可見的，但陰影仍然被剪切掉。有沒有辦法讓這在CSS中完成？也可能在JavaScript/JQuery中？或者是設置大於DIV的盒子陰影偏移量並重新定位陰影（不太優雅）的唯一方法。如何創建一個完整的CSS盒陰影，而不是剪輯

div#shadow 
{ 
    position: absolute; 
    background-color: transparent; 
    top: 100px;  
    left: 100px; 
    width: 300px; 
    height: 200px; 
    box-shadow: 100px 100px 100px gray; 
}

來源

2013-01-14 Jan Robert Leegte

我不喜歡頁面上的位置元素，但這可能是一個很好的方法嗎？

div#shadow { 
    position: absolute; 
    background-color: transparent; 
    top: 100px;  
    left: -9999px; 
    width: 300px; 
    height: 200px; 
    box-shadow: 10199px 100px 100px gray; 
}

給了left財產大的負值，然後給box-shadow的左財產使用這個公式計算出的數字：

0 - actual negative left + desired left + original box-shadow's left

因此，對於你上面的例子，那就是：

0 - -9999 + 100 + 100 = 10199

您可以看到它在jsfiddle中工作。

我能看到的唯一方法是匹配div的border-radius和background-colour，以便它匹配陰影。在這種情況下，border-radius應該是100px，但我根本無法匹配background-color，當然它會隨着不同的顏色或圖像而改變。

來源

2013-01-14 11:42:35 cchana

謝謝。你幾乎證實了我的問題，抵消技巧是唯一的。我喜歡你的野心來填補這個陰影，但我也無法讓它工作。明智的CSS就是這種情況。也許有人知道一個JavaScript技巧。但是這可能會涉及SVG或畫布。如果沒有進一步的反應，我會接受你的答案。 –

-1

如果使用opacity代替TRANSPARANT背景色它應該工作。

來源

2013-01-14 10:45:59 jdepypere

恐怕不透明也會隱藏箱形陰影。 –

哦，我認爲這就是你的意思。那麼你只需要那個影子，沒有div的白色襯裏？ – jdepypere

就是這個！ –

如何創建一個完整的CSS盒陰影，而不是剪輯

回答

相關問題