简单的CSS盒子阴影

Question

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

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

这是我的代码：

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

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

Answer 1

我从头开始制作了以下小提琴，如果你愿意，你可以使用它

Demo

<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跨越整行，底部的阴影隐藏在另一个{{1使用div

  

注意：我忘了添加background: #fff;和-moz前缀，所以请务必使用   如果你想支持旧的浏览器，也可以使用它们。

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