使用颜色渐变创建弯曲阴影

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大师可以提供任何帮助,那么最感谢.

注意:我不认为此链接完全涵盖了我的问题.它只讨论了曲线 - 虽然我需要一条带有颜色渐变的曲线......

Answer 1

对我来说,看起来像是可以使用如下所示的几个元素实现的东西.阴影实际上linear-gradient是放置白色圆圈的顶部.这种方法的缺点是它只能用于纯背景(因为重叠的圆圈需要纯色).

这看起来似乎不太可能使用a,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>

Answer 2

您可以使用:before伪元素来做到这一点box-shadow

div {
  width: 200px;
  height: 100px;
  border: 1px solid #aaa;
  position: relative;
  background: white;
}

div:before {
  content: '';
  border-radius: 50%;
  height: 100%;
  width: 100%;
  position: absolute;
  z-index: -1;
  left: 0;
  transform: translateY(103%);
  box-shadow: 0px -54px 13px -47px #000000, -4px -45px 35px -28px #999999;
}

<div></div>