创建一条在各个方向淡出/变得透明的线

Question

我正在尝试创建一条线，使用渐变，向每一侧变得透明，类似于：Image - A vertical, bright line, that fades into the background on all sides

我已经接近重现它了。 Image - The same except for some minor differences

在我最好的尝试中，如上所示，我作弊并将侧面设置为背景色：

.outer-div:before {
    content: "";
    background:
        /* sides same color as background */
        linear-gradient(to right, rgba(100, 100, 90, 1), rgba(0, 0, 0, 0), rgba(100, 100, 90, 1)),
        linear-gradient(rgba(100, 100, 90, 1) 0, rgba(0, 0, 0, 0) 20% 80%, rgba(100, 100, 90, 1) 100%),
        /* the actual color */
        /*rgba(149, 147, 132, 1);*/
        /* changed to white so it's easier to see */
        rgba(255, 255, 255, 1);
    float: left;
    /* again, changed from 5 to 20px so it's easier to see */
    width: /*5px;*/ 20px;
    height: 112px;
}

<div class="outer-div">
  A div with some text<br/>
  text<br/>
  text<br/>
  text<br/>
  text<br/>
  text
</div>

这是我能想到的最好的办法了。

有没有人知道如何让侧面真正透明？

Answer 1

最简单的方法可能是在 gradient 上使用 blur。

div::before {
  content: '';
  display: block;
  width: 10px;
  height: 150px;
  background: linear-gradient(to bottom, transparent, black 20%, black 50%, transparent);
  filter: blur(3px);
}

<div></div>

创建一条在各个方向淡出/变得透明的线

Creating a line that fades out / becomes transparent in every direction

css

gradient