【问题标题】: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。除非你在其中添加一些元素或给它一个静态高度,否则你不会看到它。

【讨论】:

  • 我现在添加了一个高度,但现在它已经全宽了,阴影也不是一直都在。
猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2011-08-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2014-12-16
相关资源
最近更新 更多