Question

我在所有内容周围实现4px嵌入框阴影边框时遇到一些麻烦，让框阴影填满窗口很好（正如你在下面的小提琴中看到的那样）但是因为我有一个固定的导航顶部，它出现在盒子阴影上方（即使它在下面虽然阴影会向上滚动并且离开导航而没有顶部边框）。
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。

Answer 2

你可以试试这个

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

Answer 3

虽然这不是正确的方法，但正确的做法是通过

对身体做到这一点

body:before {
  content: '.';
  width: 100%;
  height: 100%,
  box-shadow: inset xxxxx;
  pointer-events: none
}

所以它保持在

之上

此外，使用您的代码我更新了小提琴：http://jsfiddle.net/yYxWg/

将margin: 4px 4px 0 4px添加到标头中。在你的html中根据需要进行修改。

css围绕所有内容插入框阴影

3 个答案: