css - 如何创建像 Apple.com 一样的 div 阴影？

Question

我有两个关于创建阴影的问题，例如 www.apple.com/ipodshuffle ...

1. 在网站上，您将看到白色背景的主要部分 - 它包含有关 iPod Shuffle 的所有信息。该主要部分的右侧、左侧和底部有阴影，但顶部没有。我该如何编码？

2. 在 iPod Shuffle 的第二张图片上方(它们全部堆叠在一起，文字为“设计。美观且可穿戴。”)有一个阴影边框，看起来像是从页面中弹出，然后又淡入页面中。我该如何编码？

Answer 1

这是您要搜索的代码:

.box{
  padding: 20px;
  border-radius: 5px;
  
  -webkit-box-shadow: rgba(0, 0, 0, 0.3) 0 1px 3px;
  -moz-box-shadow: rgba(0,0,0,0.3) 0 1px 3px;
  box-shadow: rgba(0, 0, 0, 0.3) 0 1px 3px;
}

<div class="box">
  Lorem ipsum
</div>

有关 box-shadow 的更多信息:http://www.css3.info/preview/box-shadow/

对于中央阴影，他们只使用了图像。