视口全屏边框图像边角被裁切/超出页面的问题咨询

嘿，我完全懂你这会儿的困惑——本来想着用100vw和100vh能让边框图像刚好铺满整个视口，结果它偏偏超出范围，还得手动用calc去减像素凑效果，这确实有点反直觉对吧？

先给你拆解问题根源：CSS默认的box-sizing属性值是content-box，这个规则下，元素的总宽度=内容宽度+左右边框宽度+左右内边距，总高度同理。你给元素设了width:100vw，再加上左右各50px的边框，总宽度就变成了100vw + 100px，这肯定会超出视口范围，高度也是同样的道理，所以你的边框边角才会被裁切或者跑到页面外面。

其实根本不需要用麻烦的calc，只需要加一行CSS就能彻底解决：

在你的border-image选择器里添加box-sizing: border-box;。

这个属性的作用就是把边框和内边距都纳入你设置的width和height计算范围内——也就是说，当你设width:100vw时，元素的内容宽度会自动调整为100vw - 左右边框宽度，总宽度刚好等于视口宽度，高度也会自动适配，你的对称边框就能完美贴合视口，不会再出现超出的情况。

修改后的完整CSS代码如下：

body {
  margin: 0;
  padding: 0;
}
border-image {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  pointer-events: none;
  border-style: solid;
  border-width: 50px;
  border-image-slice: 20%;
  border-image-repeat: round;
  border-image-source: url(https://i.sstatic.net/6JkZjaBM.png);
  /* 新增这一行核心代码 */
  box-sizing: border-box;
}

补充一句：你之前用calc(100vw - 95px)能凑效，其实是手动抵消了边框的近似宽度，但box-sizing是更优雅、更通用的方案——不管你之后调整边框宽度到多少，它都能自动适配，不用再手动修改calc里的数值。

内容来源于stack exchange