如何使用CSS实现曲线阴影效果？

Question

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

我尝试用线性渐变作为背景图片来设计一个 <hr> 元素的样式，作为在图像上使用 box -shadow 规则的替代方法，但它并不能产生所需的曲线阴影效果。

我尝试的这个目标可以只通过 CSS 实现吗？

以下是我的当前代码：

HTML

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

- user3760959

---

你在谈论什么影响？ - Xenio Gracias

@XenioGracias 灰色底部阴影效果。 - user3760959

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>

这里的想法是在实际元素（即上面片段中的<div>）后定义一个伪元素:after，其中包含一个radial-gradient。为了模拟所需效果，该radial-gradient被着色为黑色内部和透明外部，并通过farthest-corner at 50% 0px参数将该渐变的中心偏移至伪元素的上边缘。希望这能有所帮助。

- Dacre Denny