css - 在CSS中创建边框，该边框是倒置的，不会添加到外部

我想知道如何创建一个不会添加到div外部但可以在内部使用的边框

#MenuBox {
    position: absolute;
    top: 10%;
    left: 2.5%;
    width: 95%;
    height: 80%;
    background-color: #5a5b54;
    z-index: 1;
    margin: -10px;
    border: 10px solid black;

}

尝试使用页边距，尽管它不起作用

最佳答案

根据我的评论，有两种解决您的问题的方法：

解决方案1：使用border-box

box-sizing: border-box将强制元素的宽度和高度计算考虑边框宽度。

body {
  padding: 0;
  margin: 0;
}
#MenuBox {
    position: absolute;
    top: 10%;
    left: 2.5%;
    width: 95%;
    height: 80%;
    background-color: #5a5b54;
    z-index: 1;

    border: solid 10px black;

    /* Calculate border as part of width and height */
    box-sizing: border-box;
}

<div id="MenuBox">
#MenuBox
</div>

解决方案2：使用box-shadow作为边框替换

使用散度为10px的插入框阴影将模仿具有边框的效果，但这一次它位于元素的范围内。 if you want to have multiple borders可以使用此效果，否则请遵循解决方案1。

body {
  padding: 0;
  margin: 0;
}
#MenuBox {
    position: absolute;
    top: 10%;
    left: 2.5%;
    width: 95%;
    height: 80%;
    background-color: #5a5b54;
    z-index: 1;

    /* Use box-shadow */
    box-shadow: inset 0 0 0 10px black;

    /* Use padding to offset content */
    padding: 10px;
    box-sizing: border-box;
}

<div id="MenuBox">
#MenuBox
</div>