div3의 절반에 CSS3 상자 그림자

Question

div의 절반에 상자 그림자를 적용하고 싶습니다. Google에서 많이 검색했지만 실패했습니다. 다음은 간단한 상자 그림자 코드입니다.

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

코딩 :

필수 : ​​사전에 감사의

배럴 ...

Answer 1

이렇게하려면 : pseudo-element에 box-shadow을 적용 할 수 있습니다.

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>