css - 使用颜色渐变创建 flex 阴影

Question

这是一个我试图仅使用 CSS 复制的阴影，但我不知道该怎么做。我花了几个小时尝试。我想我需要创建 2 个阴影元素，但我不确定如何继续。
我得到的最接近的是这个(一个糟糕的尝试 - 我知道):

.type-product:before, .type-product:after{
  z-index: -1;
  position: absolute;
  content: "";
  bottom: 25px;
  left: 21px;
  width: 50%;
  top: 80%;
  max-width:300px;
  background: #777;
  box-shadow: 0 35px 20px #777;
  transform: rotate(-8deg);
}
.type-product:after{
  transform: rotate(8deg);
  right: 20px;
  left: auto;
}

如果有任何 CSS 专家可以提供任何帮助，我们将不胜感激。

注意:我不认为 this link完全涵盖了我的问题。它只是讨论了曲线——而我需要一 strip 有颜色渐变的曲线……

Answer 1

对我来说，这看起来可以使用如下所示的几个元素来实现。阴影实际上是一个 linear-gradient，其上放置了一个白色圆圈。这种方法的缺点是它只适用于纯色背景(因为覆盖的圆圈需要纯色)。

这看起来不太可能使用 box-shadow 因为阴影本身看起来像一个渐变，从左边的透明或白色到中间的黑色再到透明或右侧再次变白。

输出是响应式的，可以适应父容器的所有维度。只需 :hover 片段中的容器即可查看其运行情况:)

.wrapper {
  position: relative;
  height: 200px;
  width: 200px;
  overflow: hidden;
}
.content {
  height: 85%;
  width: 100%;
  border: 1px solid;
}
.wrapper:before {
  position: absolute;
  content: '';
  bottom: 0px;
  left: 0px;
  height: 15%;
  width: 100%;
  background: linear-gradient(to right, transparent 2%, #444, transparent 98%);
}
.wrapper:after {
  position: absolute;
  content: '';
  bottom: -186%;
  /* height of before - height of after - 1% buffer for the small gap */
  left: -50%;
  height: 200%;
  width: 200%;
  border-radius: 50%;
  background: white;
}
* {
  box-sizing: border-box;
}
/* just for demo */

.wrapper {
  transition: all 1s;
}
.wrapper:hover {
  height: 300px;
  width: 400px;
}

<div class='wrapper'>
  <div class='content'></div>
</div>