html - 黑色 50px 阴影从不透明度 1 开始到不透明度 0 结束(逐渐)

Question

我们如何向背景图像添加黑色阴影，阴影从不透明度 1 开始逐渐降低到不透明度 0，在图像的所有 4 个边上？ (至少 50 像素值的“降低阴影不透明度”。box-shadow 仅提供少量不透明度逐渐下降的阴影。)

我试过使用 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 应该 super 、 super 深……像这样:

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>