将框阴影应用于div

Question

我正在尝试在css中复制以下屏幕截图：

首先可以这样做还是我需要使用图像？

我启动了以下codepen，其代码为：

<div class="module">
  <h2>Header</h2>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Qui aspernatur sit perspiciatis debitis dolore impedit veniam illo dolorum tenetur eos eum placeat consectetur numquam error doloribus culpa ratione! Dolor voluptate!</p>
</div>

body {
  background:#f8f8f8;
  margin:40px;
}

.module {
  width:300px;
  background:white;
  padding:15px;
  border-top:5px solid orange;
  position:relative;
  &:after {
    content:'';
    position:absolute;
    bottom:0;
    left:0;
    width:100%;
    height:40%;
  }
}

问题是模块底部的阴影......

编辑：忘了说这是一个响应框，所以没有设置宽度。

Answer 1

您需要使用CSS3 box-shadow属性。

编辑我没有注意到你之前需要的阴影只能在底部。

http://jsfiddle.net/Kpzg4/3/

编辑2 纳入oGeez的链接以获得更好的影子。在DOM中的'shadow'元素上需要删除用于shadow的:after伪类作为伪类。

http://jsfiddle.net/Kpzg4/27/

Answer 2

您可以使用box-shadow：

-moz-box-shadow:    3px 3px 5px 6px #ccc;
-webkit-box-shadow: 3px 3px 5px 6px #ccc;
box-shadow:         3px 3px 5px 6px #ccc;

如果您只想设置底部阴影，请使用：

-webkit-box-shadow: 0 5px 2px -2px #ccc;
-moz-box-shadow: 0 5px 2px -2px #ccc;
box-shadow: 0 5px 2px -2px #ccc;

Demo

Answer 3

一个盒子阴影会起作用，但是它会在整个盒子周围产生相同的阴影，只需要在底角就可以了。

背景图片可能是实现此目的的最简单方法，并将其作为容器div的背景。