如何在视口周围可靠地绘制一个1px的边界？
如何在视口周围可靠地绘制一个1px的边界？
提问于 2021-01-16 19:54:08
我正在尝试解决如何在视口周围绘制一个1px的边框。我本以为这样就可以了，但它并没有，它主要是绘制边框，但是当调整浏览器大小时，右边框和下边框会不断消失。
<!DOCTYPE html>
<html>
<head>
<title>Something</title>
<style>
* {
box-sizing: border-box;
}
html,
body {
height: 100%;
}
body {
margin: 0;
background-color: blue;
border: 1px solid red;
}
</style>
</head>
<body>
</body>
</html>
回答 4
Stack Overflow用户
发布于 2021-01-16 20:13:00
无法重现您的问题，但可以考虑使用outline。它使用与border几乎相同的语法，但您可以添加一个负outline-offset，使其像一个“嵌入阴影”。
html, body {
height: 100%;
}
body {
margin: 0;
background-color: blue;
outline: 1px solid red;
outline-offset: -1px;
} <html>
<body>
</body>
</html>
Stack Overflow用户
发布于 2021-01-16 20:21:11
您可以使用伪元素，例如在本例中，它跨越100vh和100vw，并具有固定的位置。然而，整个其余部分也必须被包装，并使用溢出规则，否则主体滚动条将剪切右侧边框。
body {
margin: 0;
}
.viewport-border {
height: 100vh;
width: 100vw;
position: fixed;
top: 0;
border: 1px solid red;
box-sizing: border-box;
}
.content {
height: calc(100vh - 7px);
width: calc(100vw - 7px);
position: fixed;
top: 1px;
left: 1px;
box-sizing: border-box;
overflow: auto;
margin: 5px;
}<div class="viewport-border"></div>
<div class="content">
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata
sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata
sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata
sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata
sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
</div>
Stack Overflow用户
发布于 2021-01-16 20:25:05
假设您想将边框放在视区周围(如问题所示)，而不放在document周围(正如其他答案所假定的那样)。
您需要使用具有较高z-index值的position: fixed;元素：
<div id="viewportBorder "></div>div#viewportBorder {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
border: 1px solid red;
pointer-events: none;
z-index: 999999;
}这就是它的实际作用：
body {
background: #09f;
}
div#viewportBorder {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
border: 1px solid red;
pointer-events: none;
/* not technically needed in this example, but you might need it in your project */
z-index: 999999;
}
.spacer-to-allow-scrolling {
height: 300vh;
width: 100px;
background-image: linear-gradient(to bottom, black, white);
margin: auto;
}<html>
<body>
<div id="viewportBorder"></div>
<div class="spacer-to-allow-scrolling"></div>
</body>
</html>
更新：感谢Temani Afif指出这一点：
值得注意的是，您的元素将隐藏所有内容，并且您无法与内容进行任何交互(单击、选择等)您可能需要考虑指针事件:none
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/65754031
复制相关文章
相似问题
腾讯云开发者
