CSS3 Box Schatten auf die Hälfte der div

Question

Ich möchte die Box Schatten auf nur die Hälfte der div anwenden. Ich habe viel in Google gesucht, aber es ist fehlgeschlagen. Hier ist der Code für einfache Box Schatten.

<style type="text/css"> 
    div{ 
     width: 200px; 
     height: 200px; 
     text-align: center; 
     background-color: gray; 
     margin: auto; 
     font-size: 30px; 
     box-shadow: 0 100px 5px 5px; 
    } 
</style> 

<div>Sometimes by losing a battle you find a new way to win the war.</div> 

Coded:

erforderlich:

Fässer Dank im Voraus ...

Answer 1

Sie können box-shadow auf sein :after: Pseudo-Element anwenden, um dies zu erreichen.

div { 
 
    width: 200px; 
 
    height: 200px; 
 
    text-align: center; 
 
    background-color: gray; 
 
    margin: auto; 
 
    font-size: 30px; 
 
    position: relative; 
 
} 
 
div:after { 
 
    position: absolute; 
 
    content: ''; 
 
    width: 100%; 
 
    height: 50%; /* Half of the original height */ 
 
    top: 0; 
 
    left:0; 
 
    box-shadow: 0 100px 5px 5px; 
 
    z-index: -1; 
 
}

<div>Sometimes by losing a battle you find a new way to win the war.</div>