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

CSS“2D”边框问题

CSS "2D" border issue

css

border

box-shadow