html - 使用 HTML 与 CSS 对图像进行框阴影

Question

我遇到的唯一可行的解​​决方案是将图像放在 div 中，给它一个边框半径并在其上放置一个框阴影，就像这样将图像的 URL 放在 CSS 中:

.score-image {
  border-radius: 5% 10% 15% 20%;
  box-shadow: inset 0 0 55px rgba(0, 0, 0, 1.0);
  width: 400px;
  height: 400px;
}

#score-image-1 {
  background: blue url('https://cdn.sstatic.net/Sites/stackoverflow/img/apple-touch-icon@2.png?v=73d79a89bded') no-repeat center;
  background-size: cover;
}

<div class="score-image" id="score-image-1">
</div>

但是我觉得这些图像是内容，并且为了将内容与演示分开在其他解决方案中发现。这可能吗？图像似乎总是出现在嵌入的框阴影之上，即使我创建了极端的 Z 索引以将阴影推出或将图像带回来也是如此。

我已经尝试了很多不同的东西，但这是我希望看到它的工作方式:

	.score-image {
		border-radius: 5% 10% 15% 20%;
		box-shadow: inset 0 0 55px rgba(0, 0, 0, 1.0);
	}

 <div class="scores">
      <div class="score-image" id="score-image-1">      
        <img src="https://cdn.sstatic.net/Sites/stackoverflow/img/apple-touch-icon@2.png?v=73d79a89bded" alt="Image">    
      </div>
    </div>

关于如何以合理的方式实现这一目标的任何想法，或者在这种情况下我只需要克服它并在 CSS 中完成它？

Answer 1

不幸的是，box-shadow 是父元素的一部分，因此您必须使用阴影元素或伪元素。

HTML

<div class="img">
  <img src="https://avatars2.githubusercontent.com/u/1918732?s=460&v=4">
</div>

CSS

img {
  display: block;
}

.img {
  border-radius: 20px;
  display: inline-block;
  overflow: hidden;
  position: relative;
}

.img:before {
  border-radius: 20px;
  bottom: 0;
  box-shadow: inset 0 0 10px 10px #000;
  content: " ";
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
  z-index: 1;
}

Demo