css - box-shadow 应该出现在右手边的边框内

Question

我正在尝试在右边框内实现框阴影，目前一切正常，除了阴影显示在右边框外。以下是我尝试过的 js-fiddle 示例代码...... 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/