css - only top box-shadow(与另一个 div 的 box-shadow 样式相同，但只有顶部)

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);
  ...
}

为什么要进行这些设置？

• horizo​​ntal offset = 0px : 没有水平偏移，
• vertical offset = -10px : 10px to the top,
• blur radius = 10px : 只使用与#box1 相同的值，
• spread distance = -10px :对于spread distance，正值会扩大阴影，但负值会使它“收缩”(见box-shadow documentation here)。由于我们使用的是 10 像素的模糊半径，因此我们至少需要使用 -10 像素的扩散距离，以避免在左侧、右侧和底部看到任何阴影。

我认为这给了我们一个非常棒的结果。与您要查找的内容非常接近: