0

我在实现所有内容周围的 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所有内容，包括.headerdiv？或者以某种方式box-shadow在 div 的顶部、左侧和右侧实现一个边框，以给人一种围绕整个站点的边框的印象？任何建议将不胜感激！

4

3 回答 3

2

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

看看我的JSFiddle。

于 2013-08-24T10:57:31.523 回答
0

你可以试试这个

   .container {
        position: relative;
        padding: 50px;
        z-index: 1;
        margin-top:50px;
    }
于 2013-08-24T10:47:54.693 回答
0

尽管这不是正确的方法，但正确的方法是对身体进行处理

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

所以它保持在上面

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

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

于 2013-08-24T10:50:24.470 回答