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标记的情况下获得相同的结果，可以使用:before sudo选择器将块添加到正文中。只需添加此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 //相应更改

以上代码将解决边框问题以及高度和高度问题。你想要设置的宽度没有任何内容。

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

2 个答案: