box-shadow只在div的左側

Question

好吧，我知道這個問題以前已經問過了，但是我有一種不同的CSS，效果也不一樣。我的CSS：

div.side-bar { 
    text-align: right; 
    width: 11%; 
    margin-left: 88%; 
    border-left: 1px solid #000; 
    position: fixed; 
    height: 88%; 
    -webkit-box-shadow: -5px 0px 5px 0px #616161; 
    box-shadow: -5px 0px 5px 0px #616161; 
} 

因此，使用下面的代碼給我一個陰影向左側，因爲我想要的，但它也增加了小的陰影，頂部和底部兩側也。如何僅在左側留下陰影？

Answer 1

嘗試通過增加負利差半徑這樣的改變你的box-shadow屬性：http://jsfiddle.net/vW8VS/3/

div.side-bar { 
    text-align: right; 
    width: 11%; 
    margin-left: 88%; 
    border-left: 1px solid #000; 
    position: fixed; 
    height: 88%; 
    -webkit-box-shadow: -5px 0px 5px -3px #616161; 
    box-shadow: -5px 0px 5px -3px #616161; 
} 

這應該讓你推它關閉只是一個側面，而不用擔心頂部和底部。

Answer 2

我發現獲得正確的盒子陰影效果的div的左側只有我不得不玩弄更多的CSS。使用下面的樣式，他們爲我嘗試實現的目標而努力。

-webkit-box-shadow: -35px 0px 20px -35px #aaa; 
box-shadow: -35px 0px 20px -35px #aaa;