html - 所有内容周围的 css 插入框阴影

Question

我在实现所有内容周围的 4px 嵌入框阴影边框时遇到了一些麻烦，让框阴影填充窗口很好(正如您将在下面的 fiddle 中看到的那样)但是因为我有一个固定的导航顶部，它出现在框阴影上方(即使它在下方，但阴影会向上滚动并使导航没有顶部边框)。
jsFiddle:http://jsfiddle.net/neal_fletcher/WHP3M/2/
HTML:

<div class="test">
    <div class="header">
        <span class="header-link">LINK</span>
    </div>

    <div class="container">This is Content
        <br/>This is Content
        <br/>This is Content
        <br/>This is Content
        <br/>This is Content
    </div>
</div>

CSS:

html {
    height: 100%;
}

.header {
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 50px;
    background-color: orange;
    z-index: 2;
}

.header-link {
    padding: 50px;
}

.test {
    min-height: 100%;
    box-shadow: inset 0 0 0 4px rgba(0, 0, 0, 1.0);
    -moz-box-shadow: inset 0 0 0 4px rgba(0, 0, 0, 1.0);
    -webkit-box-shadow: inset 0 0 0 4px rgba(0, 0, 0, 1.0);
}

.container {
    position: relative;
    padding: 50px;
    z-index: 1;
}

有没有办法在所有内容周围实现 box-shadow，包括 .header div？或者以某种方式在 div 的顶部、左侧和右侧实现 box-shadow 以给人一种围绕整个站点的边框的印象？任何建议将不胜感激!

Answer 1

我可能会将插图应用于 body，但您可以使用您的代码轻松实现相同的结果。诀窍是包装 .header 和样式 .header-wrapper 。这样，阴影边框或填充就不会影响框的大小。

看看我的 JSFiddle .