如何创建类似于Apple.com的div阴影效果？

Question

我有两个关于创建阴影的问题，就像www.apple.com/ipodshuffle网站一样...

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

2. 就在iPod Shuffle的第2张图片上方(当它们全部堆叠在一起时，并且文本读取“Design. As beautiful as it is wearable.”) ，有一个阴影边框，看起来像是从页面中弹出，然后又淡化回页面。我该如何编写代码呢？

- Abijah

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/

至于中央阴影，他们只是使用了一张图片。

- zessx

Answer 2

.box {
        width: 200px;
        height: 100px;
        margin: auto;
        padding: 20px;
        border-radius: 5px;
        
        background-color: #e4e4e4;
        border: 1px solid #adadad;
        -webkit-box-shadow: 0 20px 70px rgba(0, 0, 0, 0.55);
        -moz-box-shadow: 0 20px 70px rgba(0, 0, 0, 0.55);
        box-shadow: 0 20px 70px rgba(0, 0, 0, 0.55);
    }

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

- Gopal