CSS "2D"국경 문제

Question

나는이 국경을 할 노력하고있어,하지만 난 일하러 기운이 궁금 해서요 지금까지 내가 가진 것은 상자 그림자로 노력했지만 다른 솔루션을 사용할 수 있습니다.

<ul class="loteos-archive"> 

    <li> 

     <div class="loteos-square-bg"> 
     <a class="thumb" href="#" style="background-image:url(image.jpg);"></a> 
     </div> 

    </li> 

</ul> 

CSS : 사전에

ul.loteos-archive li .loteos-square-bg{ 
    height: 400px; 
    width: 100%; 
    -webkit-box-shadow: -5px 4px 0px -4px blue; 
    -moz-box-shadow: -5px 4px 0px -4px blue; 
    box-shadow: -5px 4px 0px -4px blue; 
} 
ul.loteos-archive li .loteos-square-bg a.thumb{ 
    width : 100%; 
    height : 400px; 
    background-repeat: no-repeat; 
    background-size: cover; 
    display: block; 
} 

감사합니다.

Answer 1

여기 box-shadow의 문서입니다 : 그냥 왼쪽으로 갈 수 있도록 (일명 h-shadow의 DoC)에 x에 대한 https://www.w3schools.com/cssref/css3_pr_box-shadow.asp

음수 값, y합니다 (문서에서 일명 v-shadow)에 대한 음의 값은 단지가 갈 수 있도록 상단.

흐림이나 확대가 필요하지 않으므로 생략 할 수 있습니다 (선택 사항 임).

따라서, 단지 이러한 몇 개조하면 되겠 어를 추가하고 당신은 갈 준비가되어 있습니다 :

ul.loteos-archive li .loteos-square-bg{ 
    height: 400px; 
    width: 100%; 
    -webkit-box-shadow: /*some positive value, called Vx afterward*/px /*Vx*/px blue; 
    -moz-box-shadow: /*Vx*/px /*Vx*/px blue; 
    box-shadow: /*Vx*/px /*Vx*/px blue; 
} 

당신은, 예를 들어, (내지 Vx = 40) 시도 할 수 있습니다 :

ul.loteos-archive li .loteos-square-bg{ 
    height: 400px; 
    width: 100%; 
    -webkit-box-shadow: 40px 40px blue; 
    -moz-box-shadow: 40px 40px blue; 
    box-shadow: 40px 40px blue; 
}