box-shadow應出現在右側的邊框內

Question

我試圖實現右側邊框內的box-shadow，目前一切正常，除了陰影正在顯示在右邊框之外。以下是JS-小提琴樣本代碼，我已經試過...... http://jsfiddle.net/5y1guk6d/1/

HTML：

<div class="header"> 
    <div class="header-bar"> 
     <h1 class="title">Page title</h1> 
    </div> 
</div> 
<div class="main"> 
    <div class="left-bar"> 
     <div class="menu"> 
      Menu Content 
     </div> 

    </div> 
    <div class="content"> 
     Main content area 
    </div> 
</div> 

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; 
} 

感謝你們的幫助..

Answer 1

如果你想框陰影出現在元素內部而不是外部，請使用inset。然後，您要反轉x偏移，使其出現在右側。

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

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