如何用CSS实现弧形阴影效果？

Question

我正在尝试使用 CSS 实现以下投影效果：

我尝试过使用<hr>线性渐变设计元素作为背景图像，作为box-shadow在图像上使用规则的替代方案，但它不会产生所需的弯曲阴影效果。

我想要做的事情只能通过 CSS 实现吗？

这是我当前的代码：

超文本标记语言

<section class="section-categories section-fruits">
    <div class="row">
        <figure class="categories">
            <img src="res/img/category/fruits.png" alt="Offers" class="categories__fruits">
        </figure>
        <div class="categories__explore">
            <p>Fruits & Vegetables</p>
            <p>A variety of fresh fresh and vegetables</p>
            <button>Explore fruit and veg</button>
        </div>
    </div>
</section>

CSS

/* Using Box Shadow, but didn't get the desired effect */    
.section-categories{
    height: 250px;
    margin: 20px 0px;
    box-shadow: 0px 1px 1px rgba(0,0,0,0.3);
}

Answer 1

一种纯 CSS 方法可能是在伪元素上使用该radial-gradient函数，如下所示：

/* The shadow CSS class element */
.shadow {
  position:relative;
}

/* The CSS peseudo element that achieves the shadow effect */
.shadow:after {
  content:'';
  display:block;
  position:absolute;
  bottom:-1rem;
  /* The main idea with this technique is to use a radial gradient to simulate the 
  desired effect */
  background:radial-gradient(farthest-corner at 50% 0px, grey 0%, transparent 50%);
  width:100%;
  height:1rem;
  
}

/* The styling below is not part of the technique and is included to support the snippet */
div {
  display:flex;
  flex-direction:row;
  justify-content:center;
  align-items:center;
}

div button {
  background:red;
  
}

<div class="shadow">
<img src="https://i.pinimg.com/originals/2b/1c/f5/2b1cf5525873467315eaa0c07394d302.jpg" height="100px" />
<button>Explore</button>
</div>

这里的想法是定义一个伪元素，即:after投射阴影的实际元素（即<div>上面代码片段中的 ），其中包含一个radial-gradient. 为了模拟所需的效果，radial-gradient使用深色内部和透明外部着色，渐变的中心通过参数偏移到伪元素的上边缘farthest-corner at 50% 0px。

希望有帮助