我在这里阅读了大约 10 个问题,但无法将它们应用到我的情况中。
我在这里创建了示例
我需要隐藏内容框顶部的阴影。 我不确定我是否做对了,或者我应该以其他方式调整图像。 我相信它可以通过比使用背景创建侧阴影更聪明的方式来完成。 谢谢。
为了满足规则:
HTML代码
<div class="container-wrapper">
blahblah header is here
</div>
<div class="container-wrapper breadcrumbz">
<div class="pusher"></div> <!-- only for experiment. i know about margins and paddings :) -->
<div class="content">
There should be no shadow on top of this block
</div>
</div>
CSS
body {
background: #4ca8cb;
}
.container-wrapper {
margin: 0 auto;
max-width: 500px;
padding:0 50px;
}
.breadcrumbz {
background: url('https://dl.dropboxusercontent.com/u/14562883/shadowline.png') no-repeat top center;
}
.pusher {
height: 14px;
}
.content {
box-shadow: 0px 0px 3px 1px #555;
background-color: #e7eaeb;
height: 200px;
}
更新
我已经解决了。 解决方案有待改进,但我得到了方法。
我可以使用
将底部 block 移动到“下方”position:relative
和负边距
最佳答案
你可以使用:before
伪元素
.content {
background-color: #e7eaeb;
height: 200px;
position: relative;
}
.content::before {
content: "";
position: absolute;
width: 100%;
height: 198px;
background-color: transparent;
z-index: -1;
box-shadow: 0px 0px 3px 1px black;
top: 2px;
}
关于html - 方框阴影 : hide top shadow,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/17889156/