我遇到的唯一可行的解决方案是将图像放在 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 中完成它?
最佳答案
不幸的是,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;
}
关于html - 使用 HTML 与 CSS 对图像进行框阴影,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/51371994/