我正在尝试在右边框内实现框阴影,目前一切正常,除了阴影在右边框外显示。以下是我试过的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;
}
赞赏你的帮助..
答案 0 :(得分:3)
如果您希望框阴影显示在元素内部而不是外部,请使用inset
。然后你想要反转x偏移,使它出现在右侧。
box-shadow:inset -5px 0 5px #ccc;