时间戳

首页 > 解决方案 > 如何为 div 元素创建一个盒子阴影包装器？

html - 如何为 div 元素创建一个盒子阴影包装器？

问题描述

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

我复制了 box 元素的代码，hid all the visible styles并添加了一个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%;
}

标签： htmlcsswrapper

解决方案

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

 /*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>

推荐阅读