css - 如何在浏览器窗口的可见部分周围获得偏移边框

Question

我有一个与此类似的设置：http ://codepen.io/anon/pen/iAJnx ，其中主要内容相当长。我想要做的是在屏幕的可见部分周围放置一个边框，如下图所示：http: //i.imgur.com/ENtLau4.png

我想要做的是创建 4 个位于屏幕边缘的 div，但我在定位和给出没有内容的 div 高度和宽度方面都在苦苦挣扎。有人对此有任何想法吗？

注意：我已经尝试过使用覆盖，但它使内容不可点击。

Answer 1

尝试这个：

HTML：

<div class="border-box"></div>

CSS：

body { position: relative; }

.border-box {
  border: 5px solid blue;
  box-shadow: 0 0 100px 100px #fff;
  position: fixed;
  pointer-events: none;
  bottom: 10px;
  left: 10px;
  right: 10px;
  top: 10px;
}

它是如何工作的：
我绝对定位了一个带有边框的叠加层，它将通过使用顶部、底部、左侧、右侧定义来粘贴屏幕的边缘。要使下面的内容可选择，您可以pointer-events: none;在叠加层上进行设置。

示例：http ://codepen.io/anon/pen/BxJbh

如果您想在不添加额外 HTML 标记的情况下获得相同的结果，可以使用:beforesudo 选择器在正文前添加一个块。只需添加这个 CSS，它就会产生相同的结果：

body:before {
  border: 5px solid blue;
  box-shadow: 0 0 100px 100px #fff;
  display: block;
  content: '';
  position: fixed;
  pointer-events: none;
  bottom: 10px;
  left: 10px;
  right: 10px;
  top: 10px;
}

示例：http ://codepen.io/anon/pen/BDhql

Answer 2

你必须设置你的内容ID（#content）

border:4px solid blue;
min-width:700px; //相应地改变。
min-height:1600px//相应地改变

上面的代码将解决边框问题以及您要设置的高度和宽度，而无需任何内容。