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

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代码段中的容器即可查看其中的操作：）

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 2

您可以使用:before伪元素和box-shadow

执行此操作

＆＃13;

＆＃13;

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;
}

＆＃13;

<div></div>

＆＃13;

＆＃13;

＆＃13;

Answer 3

除了答案之外，这对你的班级来说也可能是一个很好的盒子阴影。 （这只是偏好和你想要的相似）。

minSdkVersion > 20

$itemsCollection = Mage::getSingleton('checkout/session')->getQuote()->getItemsCollection();
$itemsVisible = Mage::getSingleton('checkout/session')->getQuote()->getAllVisibleItems();
$items = Mage::getSingleton('checkout/session')->getQuote()->getAllItems();
<?php foreach($items as $item) { ?>     
    <p class="product-name"><a href="<?php echo $item->getProductUrl();?>"><?php echo $item->getName(); ?></a></p>
    <span class="price"><?php echo Mage::helper('core')->currency($item->getPrice(),true,false);?></span>
    <span class="qty">Qty: <?php echo $item->getQty(); ?> </span>
<?php } ?>

希望你喜欢它。