如何创建像Apple.com这样的div阴影？

Question

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

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

2. 就在iPod Shuffles的第二张图片上方(它们全部堆叠在一起,文字写着"设计.它既美观又可穿戴.")有一个阴影边框,看起来像是弹出的页面,然后淡入页面.我该如何编码呢？

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/

对于中央阴影,他们只使用了图像.