Question

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

看起来应该是这样的效果：

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/

Answer 1

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

一个例子：

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 2

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

如何使用css shadow创建包含页面div？

2 个答案: