html - 将框阴影应用于 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/

EDIT 2 合并 oGeez 的链接以获得更好的阴影。删除了对阴影使用 :after 伪类，因为 DOM 中的“阴影”元素需要伪类。

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