Css 如何在div底部产生淡入效果？

我需要在div的底部设置淡入淡出效果，如图所示。请帮忙

.divClass {
    box-shadow: 0 80px 80px gold inset;
}

或

取决于你把它放在哪个元素上。插图放在盒子里。如果没有插图，它就在盒子外面

或

---

取决于你把它放在哪个元素上。插图放在盒子里。如果没有插图，它就会跳出盒子。

我会在主容器上使用一个伪元素来实现所需的效果

诸如此类

html:

最后是小提琴：

---

在

.mainCont

中处理更多内容：

我会在主容器上使用伪元素来实现所需的效果

诸如此类

html:

最后是小提琴：

---

在

.mainCont

中处理更多内容：

它可以工作，但在div中生成的内容是动态的，显示在阴影上方。阴影隐藏在内容后面。@Abuisac你可以试试我的第二种方法。因此，如果你有一个页脚，你可以把方框阴影放在那里，它应该可以工作。它可以工作，但在div中生成的内容是动态的，显示在阴影上方。阴影隐藏在内容后面。@Abuisac你可以试试我的第二种方法。因此，如果您有一个页脚，您可以将框阴影放在那里，它应该可以工作。

.anotherDivClass {
    box-shadow: 0 0 80px gold;
}

<div class="mainCont">
    <p>Content goes here</p>
</div>

.mainCont {
    position: relative;
}

.mainCont:after {
    content: "";
    width: 100%;
    height: 80px;
    display: block;
    position: absolute;
    background: rgba(150, 123, 19, 1);
    background: -webkit-gradient(linear, 0% 0% 0% 100%, from(rgba(150, 123, 19, 0.1)), to(rgba(150, 123, 19, 1)));
    background: -webkit-linear-gradient(top, rgba(150, 123, 19, 0), rgba(150, 123, 19, 1));
    background: -moz-linear-gradient(top, rgba(150, 123, 19, 0), rgba(150, 123, 19, 1));
    background: -ms-linear-gradient(top, rgba(150, 123, 19, 0), rgba(150, 123, 19, 1));
    background: -o-linear-gradient(top, rgba(150, 123, 19, 0), rgba(150, 123, 19, 1));
    bottom: 0;
    left: 0;
    z-index: 10;
}