简单的CSS盒子阴影

Question

我正在尝试重新创建下面图片中的阴影效果：

我正在尝试使用box-shadow来重新创建两种颜色之间的阴影效果，但我无法弄清楚如何实现。

以下是我的代码：

box-shadow: inset 0 0 2px 0px #000000;

阴影出现在两侧，与我想要实现的效果相比太强了。有什么建议吗？

- Publicus

Answer 1

我已经从零开始创建了下面的fiddle，如果你喜欢可以使用它

演示

<div class="one"></div>
<div class="two"></div>
<div class="three"></div>

.one {
    background: #B4B300;
    height: 100px;
}

.two {
    background: #FD370A;
    height: 100px;
    box-shadow: 0 0 5px #212121;
}

.three {
    background: #fff;
    height: 5px;
}

我使用的是从所有方向渲染的阴影，而不是使用inset阴影，右侧和左侧都被隐藏了，因为div跨越整个行，底部的阴影使用另一个div并设置background: #fff;以隐藏。

注意：我忘记添加-moz和-webkit前缀，所以如果您想支持旧浏览器，请确保使用它们。

- Mr. Alien

---

@Publicus Loops也给出了一个很好的答案，如果你想坚持使用inset，通常我会使用没有inset的阴影，所以我提供给你这个 :) - Mr. Alien

Answer 2

http://jsfiddle.net/CQvBb/

<div class="first"></div>
<div class="second"></div>

.first {
    background:#B4B300;
    width:500px;
    height:100px;
    box-shadow: inset 0 -5px 5px -5px #000000;
    -moz-box-shadow: inset 0 -5px 5px -5px #000000;
    -webkit-box-shadow: inset 0 -5px 5px -5px #000000;
}
.second {
    background:#FD370A;
    width:500px;
    height:100px;
}

- daniel__