如何添加框阴影效果，仅到div的边框？

Question

我试图在边框上实现阴影效果，就像在下面的Adobe XD中模拟的那样

我测试过去除背景色，但它在container

中隐藏了阴影

<style>
  body {
    padding: 30px;
  }
  
  .border-shadow {
    box-shadow: 1px 1px 5px black;
    background-color: transparent;
    width: 100px;
    padding: 10px;
  }
</style>

<div class="border-shadow">
  tests
</div>

是否只有css个解决方案？谢谢。

Answer 1

这是实现目标的一个例子！

我们使用伪元素::before和blur()效果。

div {
  position: relative;
  width: 344px;
  height: 121px;
  border: 2px solid #bed5e6;
  border-radius: 2px;
}

div::before {
  content: '';
  display: block;
  position: absolute;
  top: 5px;
  left: 5px;
  border: 5px solid rgba(0,0,0,.07);
  border-radius: 2px;
  width: 100%;
  height: 100%;
  filter: blur(4px);
}

<div><h1>Test</h1></div>

Answer 2

您可以将插入框阴影与标准阴影组合以实现这种外观：

#myDiv {
  background: transparent;
  border: 1px solid skyBlue;
  box-shadow: inset 3px 3px 5px rgba(0,0,0,.1), 3px 3px 5px rgba(0,0,0,.1);
  height: 100px;
  width: 250px;
}

<div id="myDiv">

</div>

或者，您可以使用::after伪元素，并应用较粗的边框和模糊效果，如下所示：

#mydiv {
  background: transparent;
  border: 1px solid skyBlue;
  height: 100px;
  position: relative;
  width: 250px;
}

#mydiv::after {
  border: 3px solid #ccc;
  content: '';
  display: block;
  filter: blur(2px);
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
}

<div id="mydiv"></div>

Answer 3

阴影也可以做到：

body {
  padding: 30px;
}

.border-shadow {
  border:1px solid;
  filter:drop-shadow(4px 4px 3px red);
  background-color: transparent;
  width: 100px;
  padding: 50px;
}

<div class="border-shadow">
  
</div>

Answer 4

在我发布问题前一个小时就开始工作，令人惊讶的是我在之后不久找到了答案

通过使用滤镜css：阴影我可以达到这种效果

 <style>
  body{
    padding:30px;
  }
  .border-shadow{
    border:5px solid black;
    filter: drop-shadow(12px 12px 7px rgba(0, 0, 0, 0.7));

    background-color:transparent;
    width:100px;
    padding:10px;
  }


</style>

<div class="border-shadow">
    <div class="test-text">
      Tests
    </div>
</div>

这是笔 Codepen