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 的文档:https://www.w3schools.com/cssref/css3_pr_box-shadow.asp

x 的负值(也就是文档中的 h-shadow)只是让它向左移动，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;
}