как добавить эффект box-shadow, только к границе 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

тень также может сделать это:

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 3

Вы можете комбинировать тень вставки со стандартной для достижения этого вида:

#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 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