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

【问题标题】：Creating a curved shadow with a color gradient使用颜色渐变创建弯曲阴影
【发布时间】：2016-03-15 12:34:17
【问题描述】：

这是我试图仅使用 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 完全涵盖了我的问题。它只是讨论了曲线——而我需要一条带有颜色渐变的曲线......

【问题讨论】：

图片出自哪里？它是来自另一个网站的屏幕截图吗？如果是这样..你可以检查它是如何在那里完成的。
@putvande 谢谢，但这是不是来自任何网站的图像（我知道 - 否则会很简单）...如果您知道使用这种类型阴影的网站，请告诉我。 ..我也花了很多时间寻找那个...
有很多例子可以在 Google 上找到：nicolasgallagher.com/css-drop-shadows-without-images/demo
how to achieve this css3 shadow effect?的可能重复
@almo - 我不这么认为 - 如果您看到我在上面发布的代码 - 它与您发布的链接非常相似。我正在寻找弯曲和阴影（变轻）

标签： css shadow

【解决方案1】：

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

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

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

.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>

【讨论】：

干得好！我会说这是不可能的。很高兴被证明是错误的。
谢谢！但是@nenad 对我来说更容易......谢谢！

【解决方案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;
}

&lt;div&gt;&lt;/div&gt;

【讨论】：

谢谢你！我需要稍微调整一下，但这真的帮助了我——真的很感激！！ :-)

【解决方案3】：

除了答案之外，这对于您的班级也可能是一个很好的盒子阴影。（这只是偏好，与您想要的类似）。

.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>

希望你喜欢。

【讨论】：