黑色50px阴影从不透明度1开始，并以不透明度0(逐渐)结束

Question

我们如何在图像的所有4个侧面添加黑色阴影，从不透明度开始的阴影，从不透明度开始并逐渐减小到不透明度0？（至少50个像素价值"减少阴影不透明度"。盒子阴影仅提供少量的阴影，其中不透明度逐渐下降。）

我尝试使用mask-image玩耍，例如：-webkit-mask-image: -webkit-gradient(linear, left 85%, left bottom, from(rgba(0,0,0,1)), to(rgba(0,0,0,0)));

这会创建所需的阴影，但仅在图像的底部，不确定是否可以在其他3个侧面创建它。

编辑：阴影应该在里面（我相信插图如果盒子阴影）

目的是使我们的用户的封面照片在我们网站的黑色背景上看起来不错，即使它们的照片更明亮。图像内部的阴影应有助于图像与网站的黑色背景融合。

Answer 1

类似的东西？

html,
body {
  height: 100%;
}
div {
  height: 100%;
  display: flex;
  justify-content: space-around;
  align-items: center;
}
.inner {
  width: 200px;
  height: 200px;
  background-image: url(http://via.placeholder.com/200x200);
  background-size: cover;
  background-position: center center;
  box-shadow: 0px 0px 40px 5px #000000;
}

<div>
  <div class="inner"></div>
</div>

等等，等等。...一个声音告诉我页面的背景是一种黑暗，深色，颜色。阴影应该在元素的内部，从最黑暗的黑暗开始，然后淡入到 ，如这样...

html,
body {
  height: 100%;
  background-color: #000000;
}
div {
  height: 100%;
  display: flex;
  justify-content: space-around;
  align-items: center;
}
.inner {
  width: 200px;
  height: 200px;
  background-image: url(http://via.placeholder.com/200x200);
  background-size: cover;
  background-position: center center;
  box-shadow: 0px 0px 40px 20px #000000 inset;
}

<div>
  <div class="inner"></div>
</div>

那是什么？哇，举起...我感觉到box-shadow应该超级，超深...像这样：

html,
body {
  height: 100%;
  background-color: #000000;
}
div {
  height: 100%;
  display: flex;
  justify-content: space-around;
  align-items: center;
}
.inner {
  width: 200px;
  height: 200px;
  background-image: url(http://via.placeholder.com/200x200);
  background-size: cover;
  background-position: center center;
  box-shadow: 0px 0px 70px 50px #000000 inset;
}

<div>
  <div class="inner"></div>
</div>

;）

听起来像是思维读物仍然关闭。因此，这是使用linear-gradient的最后示例。

html,
body {
  height: 100%;
  background-color: #000000;
}
div {
  height: 100%;
  display: flex;
  justify-content: space-around;
  align-items: center;
}
.inner {
  width: 200px;
  height: 200px;
  background-image: radial-gradient(circle at center, rgba(0,0,0, 0.1) 0%, #000000 70%, #000000 100%), url(http://via.placeholder.com/200x200);
  background-size: cover, cover;
  background-position: center center, center center;
}

<div>
  <div class="inner"></div>
</div>

Answer 2

一种可能性是使用inset标记使用CSS3 box-shadow属性。这将在容器或元素中弹出阴影（类似于图像编辑器中有时称为 vignette 的阴影），它遵守元素的比例，因此可能不是您追求的。

ex。html

<div id="container"></div>

ex。CSS

#container {
    width:100px;
    height:100px;
    background-image:url(path/to/image.jpg);
    background-size:cover;
    -webkit-box-shadow:inset 0 0 50px #000000;
    box-shadow:inset 0 0 50px #000000;
}

使用垂直和水平偏移值（此处设置为0）可能会产生更有效的结果，例如类似的结果...

width: 200px;
height: 200px;
box-shadow: inset 0 100px 50px -25px #000000;

在

一如既往， @ css-tricks上的 box-shadow属性有很好的解释。

希望有帮助。：）