html - 给边框添加阴影

Question

如您所见，我创建了一个侧边栏:

<div id="sideBar">
<button class="button">Home</button><br>
<button class="button">About Me</button><br>
<button class="button">Gallery</button><br>
<button class="button">Contact</button>
</div>
<div id="content">
    <p>Content Div</p>
</div>  

我的CSS:

#sideBar {
background-color: grey;
width: 200px;
float: left;
height: 200px;
-webkit-box-shadow: inset -16px 0px 10px -8px rgba(0,0,0,0.75);
-moz-box-shadow: inset -16px 0px 10px -8px rgba(0,0,0,0.75);
box-shadow: inset -16px 0px 10px -8px rgba(0,0,0,0.75);
}

.button {
background-color: grey;
border-width: 0 0 2px 0;
border-color: white;
border-style: solid;
color: rgb(231, 231, 231);
cursor: pointer;
-webkit-box-shadow: inset -16px 0px 10px -8px rgba(0,0,0,0.75);
-moz-box-shadow: inset -16px 0px 10px -8px rgba(0,0,0,0.75);
box-shadow: inset -16px 0px 10px -8px rgba(0,0,0,0.75);
width: 200px;
}

#content {
background-color: white;
color: black;
float: left;
width: 200px;
border: 1px solid black;
height: 200px;
}

#content p {
margin-left: 20px;
}

fiddle : http://jsfiddle.net/of4dcp2u/1/

我使用了一些内部阴影。唯一的问题是我无法在边界线上获得阴影效果。白色边框没有任何阴影。

我不想为按钮使用任何图像。这个问题有解决方案吗？

Answer 1

Sam，像这样给内容 div 添加阴影

.button {
    background-color: grey;
    border-width: 0 0 2px 0;
    border-color: white;
    border-style: solid;
    color: rgb(231, 231, 231);
    cursor: pointer;

    width: 200px;
}

#content {
    background-color: white;
    color: black;
    float: left;
    width: 200px;
    border: 1px solid black;
    height: 200px;
     -webkit-box-shadow: -16px 0px 10px -8px rgba(0,0,0,0.75);
    -moz-box-shadow: -16px 0px 10px -8px rgba(0,0,0,0.75);
    box-shadow: -16px 0px 10px -8px rgba(0,0,0,0.75);
}