html - 左右边缘的插图框阴影褪色/透明

Question

我正在尝试添加一个在 div 的左右边缘具有透明度/淡出的嵌入框阴影。我设法添加了一个普通的嵌入框阴影，但我不知道如何为边缘添加透明度。我该怎么做？

这是我正在努力实现的一个例子。

  .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;

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

Answer 1

我设法使用 radial-gradient 做到了。检查这个 fiddle

*{
  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;
}

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