使用 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/Whosebug/img/apple-touch-icon@2.png?v=73d79a89bded') no-repeat center;
  background-size: cover;
}

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

但是我觉得这些图像是内容，为了将内容与演示分开，我想将图像放在 HTML 中的 div 中，并将阴影放在上面它与 CSS 一起使用，而不像其他解决方案中那样使用绝对定位。这可能吗？图像似乎总是出现在嵌入的框阴影上，即使我创建极端 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/Whosebug/img/apple-touch-icon@2.png?v=73d79a89bded" alt="Image">    
      </div>
    </div>

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

Answer 1

这是你想要的输出吗？如果是这样，我所做的就是更改几个样式。

.score-image {
    display: inline-block; // Inline-block will make the element not 100% width.
    border-radius: 25px;
    box-shadow: inset 0 0 55px rgba(0, 0, 0, 1.0);
    overflow: hidden; // This will make the border-radius sort of 'crop' or mask the image
}

https://codepen.io/bartholomewdavid/pen/ZjWrqM

Answer 2

不幸的是，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

使用 HTML 与 CSS 的图像上的框阴影

Box-shadow on image using HTML vs CSS

html

css

image

box-shadow