ombre de la boîte ne fonctionne pas

Question

J'essaie d'ajouter une ombre de la boîte à #main-content-area sur le dessus et 50% à la fois sur les côtés gauche et droit (à partir du haut), mais ça ne fonctionne pas.

Quel est le problème avec mon code?

.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>

Answer 1

utilisation largeur "halfshadow" contenu div ou lieu. Voici par exemple avec ajouté « largeur »

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

Answer 2

vous devez mentionner balise 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; 
} 

Answer 3

Juste pour montrer-box shadow J'ai enlevé la position: absolute; vous pouvez placer votre div selon vos besoins.

.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>

Answer 4

Retirer position: absolute; de .halfshadow classe