[英]How do I reliably draw a 1px border around the viewport?
我正在尝试解决如何在视口周围绘制 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>
无法重现您的问题，但一个想法可能是改用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>
在这种情况下，您可以使用跨越 100vh 和 100vw 并固定 position 的伪元素。 然而，整个 rest 也必须被包装并使用溢出规则，否则主体滚动条将切掉右侧边框。
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>
假设您想在视口周围放置边框（如问题所示），而不是在文档周围（正如其他答案似乎假设的那样）。
您需要使用position: fixed; 具有高z-index值的元素：
<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 指出这一点：
值得注意的是，您的元素将隐藏所有内容，并且您不能与内容进行任何交互（单击、选择等），您可能需要考虑 pointer-events:none
我会这样做：
html::after { content:""; position:fixed; top:0; left:0; right:0; bottom:0; border:1px solid red; pointer-events:none; }
将边框从 1px 增加到 2px 时，如何防止 li 的高度发生变化？
[英]How do I prevent the height of li change when increasing its border to 2px from 1px?
当我使用transform translate比我的边框高度增加1px时如何解决它？
[英]When i use transform translate than my border height increase more 1px how to solve it?
当边框大于 1px 时，为什么图像周围和边框有空白？
[英]why there is a white space around image and it's border when the border is greater than 1px?
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.