Html 如何在左右边界上放置两个线性渐变？

我希望创建一个具有宽左右边框的黄色div。朝向div的外边缘，左右边界的颜色逐渐变细为白色，以模拟透明度

到目前为止，我已经能够构造div，但不能构造渐变：

.褪色{ 边距：2米2米；衬垫顶部：2米；衬垫底部：2米； 背景：RGB242242194； 右边框：3em黑色实心； 左边框：3em黑色实心； 边界图像：线性梯度90度，rgb255，255，255 0%，rgb242，242，194 100%； {

---

Text如果您不熟悉渐变，并且不想弄乱它们，则应使用Colorzilla渐变工具：

.褪色{ 边距：2米2米；衬垫顶部：2米；衬垫底部：2米； 背景：线性梯度90度，白色0%，rgb242，242，194 5%，rgb242，242，194 95%，白色100%； } 文本 div{ 背景：线性梯度90度，白色0%，rgb242，242，194 8%，rgb242，242，194 92%，白色100%； 填充：15px； 利润率：30像素； } p{ 左侧填充：50px； } 正文