更改阴影的大小而不是实际的 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

试试这个：即改变过滤器：drop-shadow to 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*/
}

Answer 2

添加第二个框架实例，将其放在图片后面，并在该图片上添加阴影怎么样？这很骇人听闻，但它确实有效。像这样：

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

更改阴影的大小而不是实际的 png

Change size of drop-shadow and not the actual png

html

css

png

dropshadow