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

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主题上的像素艺术风格边框

1 个答案: