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

感谢你的帮助。

- SatAj

Answer 1

如果您想让盒子阴影出现在元素内部而不是外部，请使用inset。然后，您需要反转x偏移量，这样它就会出现在右侧。

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

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

- Explosion Pills