简单CSS框阴影

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

这是两种颜色之间的阴影，我正在尝试使用box shadow重新创建。但我想不出来

这是我的密码：

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

---

阴影出现在两边，与我试图实现的目标相比，它太强了。有什么建议吗？

我从头做了下面这把小提琴，如果你喜欢，你可以用它

.一{
背景#B4B300；
高度：100px；
}
.二{
背景：#FD370A；
高度：100px；
盒影：0 0 5px#212121；
}
.三{
背景：#fff；
高度：5px；
}

与使用

inset

shadow不同，我使用的是从四面渲染的阴影，当

div

跨越整行时，会隐藏左右阴影，底部的阴影会使用另一个

div

隐藏，使用

背景：#fff

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



.首先{
背景#B4B300；
宽度：500px；
高度：100px；
框阴影：插入0-5px 5px-5px 000000；
-moz盒阴影：插入0-5px 5px-5px#000000；
-webkit盒阴影：插入0-5px 5px-5px#000000；
}
.第二{
背景：#FD370A；
宽度：500px；
高度：100px；
}
@Publicus Loops也给出了一个很好的答案，如果你想坚持使用插图，通常我使用没有插图的阴影，所以我向你提供了以下内容：）
<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;
}

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