如何创建包含 div 和 css 阴影的页面？

Question

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

效果应该是这样的：

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

A: body 背景

B: 页面容器

C: header

D: content/sub-header

我目前的款式是这样的：

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

但它什么都不做，它只会在存在 p 标签时添加底部 drop-shadow。

Fiddle: http://jsfiddle.net/kgr9hs3q/

Answer 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/Whosebug/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>

Answer 2

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

如何创建包含 div 和 css 阴影的页面？

How do I create a containing page div with css shadow?

html

css

containers

shadow