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;
    box-shadow: 15px 25px 20px #222; /*this is changed*/
}

Answer 2

如何添加框架的第二个实例，将其放在图片后面，并在该实例上添加阴影？这很hacky，但是可以用。像这样：

.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

2 个答案: