Question

这样的阴影的问题

在网站上，您会看到主要部分带有白色背景 - 它包含有关iPod Shuffle的所有信息。此主要部分的右侧，左侧和底部有阴影，但顶部没有阴影。我该如何编码呢？
就在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/

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

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>

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

2 个答案: