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的DOC：用於x（在doc又名h-shadow）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; 
} 

可以，例如，嘗試（與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; 
}