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（docに別名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; 
} 

あなたは、例えば、（= 40 Vxとして）試してみてください：

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