tumblr 主题上的像素艺术风格边框

Question

我想在我的 #wrap 周围创建一个像素艺术风格的边框 - 基本上只是边框的角被切掉，如下所示：

我很难弄清楚它（当涉及到 css 和 html 时，我完全是个初学者，而且大多数时候只是用它来调整我的 tumblr 网站）。这是网站上当前代码和边框的样子：

        #wrap {
        width: 500px;
        margin: 0 auto;
        padding: 50px;
        background: #fff;
        background: rgb(225, 225, 225);
        background: rgba(255, 255, 255, 0.95);
        border: 5px solid #000;
    }
    

有谁知道我该如何实现这个？我认为删除边框的角很容易，但我在网上找不到任何指导。

谢谢。

Answer 1

使用多个box-shadow

div {
  width: 50%;
  height: 50vh;
  margin: 2em auto;
  box-shadow:   -15px 0 0 0 black,
                 15px 0 0 0 black,
                 0 -15px 0 0 black,
                 0 15px 0 0 black;
}

<div></div>