帶陰影的垂直線條

我想在整個頁面上創建一個垂直線條陰影，如下所示：http://i.stack.imgur.com/fsJCE.png。我試過盒子陰影，但那樣我仍然在頂部有一個陰影，我只想在圖像右側。帶陰影的垂直線條

我已經嘗試過：

<html> 
<head> 
    <title>Box Shadow Test</title> 
    <style> 
    body, 
html { 
margin:0; 
padding:0; 
color:#000; 
background:#52667B; 
} 
    wrapper { 
     width:750px; 
margin:0 auto; 
background:#99c; 
    } 


    #main { 
     padding-left: 50px; 
float:left; 
width:500px; 
-webkit-box-shadow: -4px 0px 5px -2px #000 ; 
} 
#sidebar { 
float:left; 
width:250px; 

} 
    </style> 
</head> 
<body> 
    <div class="wrapper"> 
     <div id="sidebar" class="navigation"> 

    <ul> 
     <li><a href='home'>Nieuws</a></li> 
     <li><a href='events'>Duiken</a></li> 
     <li><a href='places'>Duikplaatsen</a></li> 
     <li><a href='reports'>Duikverslagen</a></li> 
     <li><a href='forum'>Forum</a></li> 
     <li><a href='gallery'>Galerij</a></li> 
     <li><a href='faq'>FAQ</a></li> 
     <li><a href='contact'>Contact</a></li> 
    </ul> 

     </div> 
     <div id="main"> 
      Lorem ipsum aute commodo cupidatat veniam occaecat esse culpa exercitation dolore magna commodo enim eiusmod laboris est dolor laboris velit sint voluptate id cillum nisi quis aliqua ut labore consectetur Duis nisi occaecat do et cupidatat in aute labore nulla consequat dolore dolor consectetur cupidatat fugiat eiusmod tempor anim eiusmod dolor proident ex aute sunt Excepteur cupidatat fugiat nostrud irure id laboris ad enim nulla deserunt quis eu ullamco consectetur tempor nostrud magna quis ut ex minim id cupidatat amet culpa amet nisi Duis Duis irure irure ullamco est dolor culpa esse id in ut reprehenderit in esse pariatur in nostrud fugiat labore ut irure do in consectetur incididunt ullamco sint do occaecat dolor Ut pariatur non sint ut in incididunt id Duis aute nulla et eu ullamco in tempor non nisi reprehenderit sit reprehenderit et tempor officia sunt pariatur aliquip in pariatur labore veniam ad adipisicing velit aliqua aliqua cillum esse Duis pariatur eiusmod sed consectetur in cillum laborum dolor enim laborum qui velit pariatur adipisicing id aute cupidatat cupidatat quis anim tempor ad labore ad sunt minim laborum exercitation labore sunt quis nulla consequat Duis deserunt deserunt eiusmod aliqua sed in qui occaecat do velit reprehenderit dolor dolor cillum veniam dolor consectetur est commodo deserunt eu amet velit velit commodo est reprehenderit aute. 
     </div> 
    </div> 

</body> 
</html>

但你可以在這個圖像上看到：http://i.stack.imgur.com/01My9.png你仍然對底部的一些影子。

任何人有任何想法如何做到這一點？

來源

2012-06-18 Bart De Kimpe

嘗試此鏈接 http://stackoverflow.com/questions/5115427/box-shadow-only-一邊 –

感謝您的鏈接，你可以在我的代碼中看到我用他的箱子陰影線，並從那裏開始。如果你刪除他的邊界，你可以看到你仍然有同樣的問題。 –