Html CSS：边界对边界？

我被要求在CSS中重新创建一些艺术作品，我正在尝试在边框的顶部添加边框。我这里有两张图片，一张是我目前的进展，另一张是艺术作品

我的进步：

我的目标是：

有什么简单的方法可以做到这一点吗

#bottom-bar {
    position: fixed;
    background-color: #2F2F2F;
    border-top: 1.8px solid #5f5f5f99;
    border-bottom: 1px solid #5f5f5f99;
    left: 0;
    bottom: 0;
    height: 50px;
    width: 100%;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    color: #fff;
    z-index: 2000;
}

---

可以使用“插入框阴影”创建多个边框

div{
宽度：100px；高度：100px；
框阴影：嵌入0 10px黑色，
嵌入0 20px灰色；
}

---

这不是一个答案，它只是一个评论，答案包括一个如何做你“说”的例子。关于这件事，请看“你好，对不起”。不知何故，当我试图为示例换行时，一个“enter”发布了评论。我现在用它编辑；）我知道你添加了一种方法，但在我的示例中，我只需要在顶部使用它，有什么方法可以做到这一点吗？@您好，是的，只需使用负排列和正垂直偏移。我还为此添加了一个示例；）请张贴您的代码，以便其他人可以提供更好的答案。您可以使用pseudo元素来实现。