Изменить размер тени, а не фактический png

Question

Я пытаюсь нанести тень на рамку, представляющую собой png с изображением внутри, и я не хочу, чтобы тень проходила над изображением. Можно ли вырезать или изменить размер тени?

.grid {
  display: grid;
  }

.box8 { /*Girl*/
    grid-area: 1 / 1 / 1 / 1;
    margin: auto;
    z-index: -1;
}

.frame1 { /*Rectangular gold frame*/
    grid-area: 1 / 1 / 1 / 1;
    filter: grayscale(20%);
    margin: auto;
    -webkit-filter: drop-shadow(15px 25px 20px #222); /*Makes the shadow fit the png-image*/
    filter: drop-shadow(15px 25px 20px #222);
}

  <div class="grid">
    <div class="box8">
   <img src="https://pbs.twimg.com/profile_images/774007491130785792/hAtxoNuW_400x400.jpg" width="240" height="300">
  </div>
    
    <img class="frame1" src="https://media.overstockart.com/optimized/cache/data/frames/FR-BW223111216X20-1000x1000.png" width="250" height="350" alt="Gullramme">
    </div>

Answer 1

Как насчет добавления второго экземпляра кадра, размещения его позади рисунка и создания на нем тени? Это хакерство, но это работает. Что-то вроде этого:

.grid {
  display: grid;
  }

.box8 { /*Girl*/
    grid-area: 1 / 1 / 1 / 1;
    margin: auto;
    z-index: -1;
}

.frame1 { /*Rectangular gold frame*/
    grid-area: 1 / 1 / 1 / 1;
    filter: grayscale(20%);
    margin: auto;
}

.frame2 { /*Rectangular gold frame*/
    grid-area: 1 / 1 / 1 / 1;
    filter: grayscale(20%);
    margin: auto;
    -webkit-filter: drop-shadow(15px 25px 20px #222); /*Makes the shadow fit the png-image*/
    filter: drop-shadow(15px 25px 20px #222);
    z-index:-2;
}

<div class="grid">
    <div class="box8">
   <img src="https://pbs.twimg.com/profile_images/774007491130785792/hAtxoNuW_400x400.jpg" width="240" height="300">
  </div>
    <img class="frame1" src="https://media.overstockart.com/optimized/cache/data/frames/FR-BW223111216X20-1000x1000.png" width="250" height="350" alt="Gullramme">
    <img class="frame2" src="https://media.overstockart.com/optimized/cache/data/frames/FR-BW223111216X20-1000x1000.png" width="250" height="350" alt="Gullramme">
</div>

Answer 2

Попробуйте вместо этого: т.е. измените фильтр: drop-shadow на box-shadow

.grid {
  display: grid;
  }

.box8 { /*Girl*/
    grid-area: 1 / 1 / 1 / 1;
    margin: auto;
    z-index: -1;
}

.frame1 { /*Rectangular gold frame*/
    grid-area: 1 / 1 / 1 / 1;
    filter: grayscale(20%);
    margin: auto;
    box-shadow: 15px 25px 20px #222; /*this is changed*/
}