如何使用 css 阴影创建包含页面 div？答案

【问题标题】：How do I create a containing page div with css shadow?如何使用 css 阴影创建包含页面 div？
【发布时间】：2015-08-06 09:49:48
【问题描述】：

我正在尝试创建一个页面容器，其中实际页面内容有一个阴影边框，包含页面内容，与页眉和页脚分开。

应该是这样的效果：

http://i.stack.imgur.com/rwLGG

A：身体背景

B：页面容器

C: 标题

D：内容/子标题

我目前的风格是这样的：

.page-container {
background: #FFFFFF;
box-shadow: 0 0 8px rgba(0,0,0,0.12);
width: 75%;
margin: 0 auto;
}

但它不做任何事情，它只是在存在 p 标签时添加底部阴影。

小提琴：http://jsfiddle.net/kgr9hs3q/

【问题讨论】：

你会为它制作一个小提琴吗？
图片似乎不是正确的链接。

标签： html css containers shadow

【解决方案1】：

您可以改用outline CSS property，它不会影响周围的其他元素，并且可以像边框一样使用（因为从您的图像来看，它只是一种颜色的边框）。

一个例子：

#container {
  outline: 41px solid #CCC;
  position:relative;
  margin-top: 40px;
}
#header-text{position:absolute;z-index:1;top:0}

<div>
  <p id="header-text">This is text in a paragraph</p>
  <div id="container">
    <p>This is text in yet another paragraph</p>
    <p>This is text in yet another paragraph</p>
    <p>This is text in yet another paragraph</p>
    <p>This is text in yet another paragraph</p>
    <img src="http://cdn.sstatic.net/stackoverflow/img/sprites.svg?v=1bc768be1b3c" title="This is an image">
    <p>This is text in yet another paragraph</p>
    <p>This is text in yet another paragraph</p>
  </div>
</div>

【讨论】：

对于文本以外的任何内容，这似乎都不起作用。内容最终会在下面。
@JWTomic 你是什么意思？我只是在内容区域内添加了一张图片来举例说明。

【解决方案2】：

显然你的容器没有高度，导致一个空白的 div。除非你在其中添加一些元素或给它一个静态高度，否则你不会看到它。

【讨论】：

我现在添加了一个高度，但现在它已经全宽了，阴影也不是一直都在。