如何实现覆盖页面内容的全屏固定边框且不阻止页面交互？

这个问题我做项目时也碰到过，核心原因是你那个全屏div默认会拦截所有鼠标事件——哪怕它看起来只有边框，整个元素的覆盖范围还是全屏的，所以下面的链接、按钮自然点不了。user-select: none没用很正常，因为它只是控制文本能不能被选中，和鼠标点击事件完全不相关。

最简单的解决方案就是给这个边框div加上pointer-events: none;属性，它的作用是让元素“忽略”所有鼠标事件，点击、hover这些操作都会直接穿透它，落到下面的页面元素上，同时边框的视觉效果还能保持在最上层，完全不影响。

修改后的代码如下：

position: fixed;
top: 0;
left: 0;
border: 36px solid var(--ccs-yellow);
width: 100%;
height: 100%;
margin: 0;
padding: 0;
box-sizing: border-box;
pointer-events: none; /* 新增这一行 */

如果你之后有特殊需求，比如需要让边框本身能被点击交互，那可以换成四个独立的边框元素（分别对应上下左右），每个元素只占对应边的位置（比如顶部边框就是top:0; left:0; width:100%; height:36px;），这样它们不会覆盖页面中间的内容，自然也不会阻挡交互，但这种写法比pointer-events要繁琐不少，所以优先推荐上面的方案。

内容的提问来源于stack exchange，提问作者Josh Krauth-Harding