0

我正在尝试添加一个插入框阴影,该阴影在 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>

4

1 回答 1

1

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

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

于 2018-05-29T14:15:40.613 回答