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

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 没有完全解决我的问题。它只是讨论了曲线——而我需要一条带有颜色渐变的曲线……

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>

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>

Answer 3

除了答案之外，这也可能是您 class 的一个很好的方框阴影。（这只是偏好，与您想要的相似）。

.box {
  width: 70%;
  height: 200px;
  background: #FFF;
  margin: 40px auto;
}
.type-product {
  position: relative;
}
.type-product:before {
  z-index: -1;
  position: absolute;
  content: "";
  bottom: 17px;
  left: 10px;
  width: 50%;
  top: 70%;
  max-width: 300px;
  background: #777;
  box-shadow: 0 18px 20px #777;
  transform: rotate(-8deg);
}
.type-product:after {
  z-index: -1;
  position: absolute;
  content: "";
  bottom: 17px;
  right: 10px;
  width: 50%;
  top: 80%;
  max-width: 300px;
  background: #777;
  box-shadow: 0 18px 20px #777;
  transform: rotate(8deg);
}

<div class="type-product box">

</div>

希望你喜欢。

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

Creating a curved shadow with a color gradient

css

shadow