关于设置 border-image 后 div 内布局空间变得很小的问题

[sarlanori]

我使用如下 css 设置 div 的边框图片后，div 中的布局空间由于 border 的原因变得很小，内容距离边缘太远了。

我尝试过如下方法，但都有一些问题：

1. 将内层 div 使用相对定位

   position: relative;
   top: -20px;
   left: -125px;
   

   这个能够解决左边和上边距离边缘太远的问题，但右边和下边距离边缘还是太远。我尝试过设置 right 和 bottom，但不起作用。宽度和高度会随着窗口大小变化，不能设成固定值。

2. 监听外层 div 大小改变事件，并设置内层 div 的大小，但是这样又把外层 div 给撑大了。

我是业余前端，想了很久也没能解决这个问题😂，希望大家能帮忙解决，谢谢😀。

边框图片：