如何实现网页滚动、缩放时始终固定在视口边缘的彩色边框

原有写法的问题 #

直接给body加边框的写法达不到效果：body的尺寸由页面内容高度决定，不会始终和浏览器视口尺寸对齐，页面滚动、缩放时边框会跟着内容移动，没法固定贴在视口边缘。

可用实现代码 #

不需要额外新增DOM节点，直接用CSS就能实现，代码如下：

/* 先清除浏览器默认边距，避免边框和视口之间出现缝隙 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  /* 保留你原本需要的样式 */
  padding-top: 50px;
  padding-bottom: 20px;
  text-align: center;
  /* 额外增加和边框宽度一致的左右内边距，防止边缘内容被边框遮挡 */
  padding-left: 5px;
  padding-right: 5px;
}

/* 用伪元素生成固定在视口的边框层 */
html::after {
  content: "";
  position: fixed;
  /* 四个方向值设为0，让元素始终铺满整个视口 */
  inset: 0;
  /* 边框样式可自行调整宽度、颜色 */
  border: 5px solid #d7000f;
  /* 设为最高层级，保证边框始终显示在最上层 */
  z-index: 9999;
  /* 关闭鼠标事件响应，不影响页面正常交互 */
  pointer-events: none;
}

关键逻辑说明 #

• 核心依赖position: fixed定位特性：设置该属性的元素会始终相对于浏览器视口定位，完全不受页面滚动、缩放操作的影响，边框位置永远不会偏移
• 添加pointer-events: none属性，让边框层不会拦截点击、悬停等鼠标操作，页面原有交互功能完全不受影响
• 如果需要兼容非常老旧的浏览器，可以把代码里的inset: 0替换为top: 0; left: 0; right: 0; bottom: 0;，效果完全一致
• 如果要调整边框粗细，同步修改border的宽度值和body的左右内边距值即可，避免边缘内容被边框遮挡

内容的提问来源于stack exchange，提问作者rthvnc