所有内容周围的css插入框阴影答案

【问题标题】：css inset box shadow around all content所有内容周围的css插入框阴影
【发布时间】：2013-08-27 09:05:26
【问题描述】：

我在实现所有内容周围的 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 以给人以整个站点周围边框的印象？任何建议将不胜感激！

【问题讨论】：

标签： html css

【解决方案1】：

你可以试试这个

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

【讨论】：

问题是什么，你在回答什么？

【解决方案2】：

虽然这不是正确的方法，但正确的方法是对身体进行此操作

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

所以它保持在上面

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

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

【讨论】：

【解决方案3】：

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

看看我的JSFiddle。

【讨论】：