左右边缘的嵌入框阴影褪色/透明

Question

我正在尝试在div的左右边缘添加一个透明/渐弱的插入框阴影。我设法添加了一个普通的插入框阴影，但我不知道如何为边缘添加透明度。我怎么能这样做？

这是我尝试实现的一个例子。

＆＃13;

＆＃13;

  .container {
  height: 300px;
  width: 300px;
  box-shadow: rgb(178, 169, 169) 0px 8px 8px -8px inset, rgb(178, 169, 169) 0px -8px 8px -8px inset;

＆＃13;

<div class="container">
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 1

我设法使用radial-gradient。检查这个小提琴

＆＃13;

＆＃13;

*{
  box-sizing: border-box;
}

body{
  margin: 0;
}
.banner{
  width: 100%;
  padding: 30px;
  background: #eee;
  position: relative;
}

.banner::before{
    content: "";
    background: radial-gradient(ellipse at center, rgba(0,0,0,0.25) 0%,rgba(0,0,0,0) 75%);
    height: 100%;
    width: 100%;
    position: absolute;
    left: 0;
    top: 15px;
    z-index: -1;
}

＆＃13;

<div>
  <div class="banner"></div>
</div>

＆＃13;

＆＃13;

＆＃13;