0

我在这里阅读了大约 10 个问题，但无法将它们应用于我的情况。

我在这里创建了示例

http://jsfiddle.net/Y4uHm/4/

我需要隐藏内容框顶部的阴影。我不确定我是否做得对，或者我应该以其他方式定制图像。我相信它可以通过比使用背景创建侧阴影更聪明的方式来完成。谢谢。

为了满足规则：

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

更新

我已经解决了。解决方案需要改进，但我得到了方法。

我可以使用“下”移动底部块

position:relative

和负边距

http://jsfiddle.net/Y4uHm/7/

4

1 回答 1

0

你可以使用: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;
        }
于 2017-02-28T08:11:02.360 回答