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

Question

我想在我的#wrap 周围创建一个像素艺术风格的边框 - 基本上只是像这样切断边框的角：

Pixilated border

我很难弄明白（在 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;
    }

Normal border

有人知道我该如何实现吗？我认为只需删除边框的角就很容易，但我无法在网上找到任何指导。

谢谢。

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>

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

Pixel art style border on tumblr theme

html

css

border

pixel

tumblr