Question

正如您所看到的，我创建了一个sideBar：

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

小提琴： 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);
}

Answer 2

您设置为box-shadow的{{1}}方向错误。使用此代码：

.button

向边框添加阴影

2 个答案: