4

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

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

  2. 就在 iPod Shuffle 的第二张图片上方（它们都堆叠在一起，文字写着“设计。既美观又可穿戴。”）有一个阴影边框，看起来像是从里面弹出来的页面，然后淡入页面。我该如何编码？

4

2 回答 2

13

这是您要搜索的代码：

.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/

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

于 2012-06-02T00:55:21.627 回答
0 

.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>

于 2018-11-13T11:07:36.893 回答