html - 如何为 Div 元素制作一个 Create Box-Shadow 包装器？

Question

我试图在一个盒子元素周围放置一个盒子阴影包装器。

我复制了 box 元素的代码，隐藏了所有可见的样式 并添加了一个 box-shadow。但这分散了各种页面元素。

HTML:

<div class = "middleAreaWrap"> 
    <div class = "mainButtons"">
        <div id = 'FirstRowButtons'">
            <button class = "ButtonOne"">ButtonOne</button>
            <button class = "buttonTwo""> ButtonTwo </button>
        </div>
        <div id = 'SecondRowButtons'">
            <button class = "ButtonThree"">ButtonThree</button>
            <button class = "buttonFour""> ButtonFour </button>
        </div>
    </div>
</div>

CSS:

/*BUTTON AREA DIV */
.mainButtons {
    z-index: 3;
    display: block;
    position: relative;
    border: 10px solid;
    border-style: groove;
    border-color: #B9B5B4;
    margin-left: auto;
    margin-right: auto;
    width: 74%;
    background-color: aliceblue;
    padding: 10px;
    bottom: 49px;
    height: 30%;
}

/*BUTTON AREA DIV WRAP */
.middleAreaWrap {
    z-index: 1;
    display: block;
    position: relative;
    border: 10px hidden;
    margin-left: auto;
    margin-right: auto;
    width: 74%;
    background-color: transparent;
    padding: 10px;
    box-shadow: 0px 0px 30px 15px #B9B5B4;*/
    bottom: 49px;
    height: 30%;
}

Answer 1

不确定这是否是您的意思，但内框是绝对定位的，因此从 .mainButtons 中删除 bottom: 49px 将防止页面元素散落在各处:

 /*BUTTON AREA DIV */
   .mainButtons {
        z-index: 3;
        display: block;
        position: relative;
        border: 10px solid;
        border-style: groove;
        border-color: #B9B5B4;

        margin-left: auto;
        margin-right: auto;
        width: 74%;
        background-color: aliceblue;
        padding: 10px;

        height: 30%;
        }

 /*BUTTON AREA DIV WRAP */
     .middleAreaWrap {
        z-index: 1;
        display: block;
        position: relative;
        border: 10px hidden;
        margin-left: auto;
        margin-right: auto;
        width: 74%;
        background-color: transparent;
        padding: 10px;
        box-shadow: 0px 0px 30px 15px #B9B5B4;*/
        bottom: 49px;
        height: 30%;
        }

<div class = "middleAreaWrap"> 
<div class = "mainButtons"">

    <div id = 'FirstRowButtons'">
      <button class = "ButtonOne"">ButtonOne</button>
      <button class = "buttonTwo""> ButtonTwo </button>
    </div>

    <div id = 'SecondRowButtons'">
      <button class = "ButtonThree"">ButtonThree</button>
      <button class = "buttonFour""> ButtonFour </button>
    </div>

</div>
</div>