盒子陰影不起作用

我試圖在頂部添加一個箱子陰影到#main-content-area，並且左右兩側（從頂部）增加50％，但它不起作用。盒子陰影不起作用

我的代碼有什麼問題？

.wrapper { 
 
    position: relative; 
 
} 
 
#main-content-area { 
 
    position: relative; 
 
    background-color: white; 
 
    margin: -80px auto auto auto; 
 
    z-index: 4; 
 
    border: 1px solid red; 
 
} 
 
.halfshadow { 
 
    position: absolute; 
 
    z-index: -1; 
 
    top: 0; 
 
    height: 50%; 
 
    box-shadow: 1px 0px 10px rgba(0, 0, 0, 0.5); 
 
}

<div class="wrapper"> 
 
    <div class="line"></div> 
 
    <div class="row"> 
 
    <div class="col-sm-2"> 
 
    </div> 
 
    <div class="col-sm-8" id="main-content-area"> 
 

 
     <div class="row"> 
 
     <div class="col-sm-4"> 
 
      <img src="me.jpg" class="img-responsive" /> 
 
     </div> 
 

 
     <div class="col-sm-4"> 
 
      <img src="me.jpg" class="img-responsive" /> 
 
     </div> 
 

 
     <div class="col-sm-4"> 
 
      <img src="me.jpg" class="img-responsive" /> 
 
     </div> 
 
     </div> 
 

 
    </div> 
 
    <div class="halfshadow"></div> 
 

 
    <div class="col-sm-2"> 
 
    </div> 
 
    </div> 
 
</div>

來源

2016-12-30 phpLover

使用寬度「halfshadow」格或地方的內容。下面是例子添加了「寬度」

.halfshadow { 
position: absolute; 
z-index: -1; 
top: 0; 
height: 50%; 
width: 100%; 
box-shadow: 1px 0px 10px rgba(0, 0, 0, 0.5); 
}

來源

2016-12-30 06:47:58

你需要提及div標籤

.div1 
{ 
    padding: 28px 10px; 
    /* width: 230px; */ 
    width:200px; 
    /* margin-right: 31px; 
    margin-left: 105px;*/ 
    margin-top:10px; 
    height: 226px; 
    box-shadow: 10px 10px 5px #888888; 
    margin-top: -20px; 
    color: blue; 
    text-align: center; 
}

來源

2016-12-30 06:50:47 andy

只是用於顯示的box-shadow我已刪除了position: absolute;您可以在DIV位置按您的要求。

.wrapper{ 
 
    position:relative; 
 
} 
 

 
#main-content-area{ 
 
    position:relative; 
 
    background-color:white; 
 
    margin: -80px auto auto auto; 
 
    z-index:4; 
 
    border:1px solid red; 
 
} 
 
    
 
.halfshadow{ 
 
    z-index:-1; 
 
    height: 50px; 
 
    width: 100%; 
 
    box-shadow: 1px 0px 10px rgba(0, 0, 0, 0.5); 
 
}

<div class="wrapper"> 
 
    <div class="line"></div> 
 
    <div class="row" > 
 
    <div class="col-sm-2"></div> 
 
    <div class="col-sm-8" id="main-content-area"> 
 
     <div class="row"> 
 
     <div class="col-sm-4"> 
 
      <img src="me.jpg" class="img-responsive"/> 
 
     </div> 
 
     <div class="col-sm-4"> 
 
      <img src="me.jpg" class="img-responsive"/> 
 
     </div> 
 
     <div class="col-sm-4"> 
 
      <img src="me.jpg" class="img-responsive"/> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    <div class="halfshadow"></div> 
 
    <div class="col-sm-2" ></div> 
 
    </div> 
 
</div>

來源

2016-12-30 06:51:45 aavrug

從.halfshadow類刪除position: absolute;

來源

2016-12-30 06:52:13

盒子陰影不起作用

回答

相關問題