在HTML中div的一边边框有阴影,css3-框阴影应出现在右侧边框内

我正在尝试在右边界内实现盒形阴影,当前一切工作正常,除了阴影在右边界外显示.以下是我尝试过的js小提琴示例代码…

http://jsfiddle.net/5y1guk6d/1/

HTML：

Page title

Menu Content

Main content area

CSS：

.header {

width: 100%;

height: 40px;

top: 0;

color: white;

}

.header-bar {

height: 100%;

overflow: hidden;

background-color: #009BE1;

}

h1.title {

display: inline-block;

font: bold 16px Arial, sans-serif;

margin: 0 5px 0 15px;

position: relative;

top: 25%;

}

.main {

width: 100%;

overflow: hidden;

position: absolute;

top: 48px;

bottom: 0;

}

/* left bar */

.left-bar {

width: 160px;

float: left;

padding:10px;

background-color: #F0F0F0;

height: 100%;

position: relative;

border-right:1px solid #aaa;

box-shadow:5px 0 5px #ccc;

}

.content {

overflow: hidden;

left: 12px;

padding: 5px 17px 5px 5px;

height: 100%;

position: relative;

}

感谢您的帮助.