只有顶部的盒子阴影（与另一个div的相同风格的盒子阴影样式但只有顶部）

Question

请参阅http://jsfiddle.net/3fTyt/806/

我需要框2与框1具有相同的框阴影样式，但只有框2的顶部必须被遮蔽。

我尝试了很多，但无法找到解决方案。你能帮忙吗？问候。

jsfiddle中的代码

CSS

#box1 {
    background: #fff;
    box-shadow:  0 0 10px 1px rgba(0,0,0,.99);

    font: bold 18px/1.2em sans-serif;
    height: 100px;
    margin: 15px auto;
    padding: 75px 15px 25px;
    text-align: center;
    width: 200px; float:left; margin:50px;
}
#box2
{
    background: #fff;

    box-shadow: 0 0 10px 1px rgba(0,0,0,.1), 0  -1px 1px rgba(0,0,0,.99);

    font: bold 18px/1.2em sans-serif;
    height: 100px;
    margin: 15px auto;
    padding: 75px 15px 25px;
    text-align: center;
    width: 200px; float:left; margin:50px;
}

HTML

<div id="box1">box 1</div>
<div id="box2">box 2: only top shadow is required and should has same shadow style with box 1</div>

Answer 1

您可以尝试这样的事情：

#box2 {
  box-shadow: 0px -10px 10px -10px rgba(0,0,0,.99);
  ...
}

为何选择这些设置？

• horizontal offset = 0px：没有水平偏移，
• vertical offset = -10px：10px到顶部，
• blur radius = 10px：只使用与＃box1相同的值，
• spread distance = -10px：至于传播距离，正值会扩大阴影，但负值会使它“收缩”。 （请参阅box-shadow documentation here）。当我们使用10px模糊半径时，我们需要使用至少-10px的展开距离，以避免在左侧，右侧和底侧看到任何阴影。

我认为这给了我们一个非常酷的结果。非常接近你所寻找的：