css - 简单的 CSS 盒子阴影

Question

我正在尝试从下图中重新创建阴影：

这是我尝试使用 box-shadow 重新创建的两种颜色之间的阴影。但我无法弄清楚。

这是我的代码：

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

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

Answer 1

我已经从头开始制作了下面的小提琴，如果你喜欢它可以使用它

演示

<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前缀，所以如果你也想支持旧版浏览器，请确保使用它们。

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