如何在div元素的一侧创建阴影？

Question

我试图仅在一侧创建阴影，如下图所示

Laravel

。

或者这个

我尝试使用

css pseudo-class

来制作类似的阴影。 （请参阅下面的代码）但不显示阴影，仅显示文本。

#shadow {
  padding: 1rem;
  overflow: hidden;
}

#shadow::after {
  content: "";
  position: absolute;
  inset: 4.625em;
  background: linear-gradient(360deg, rgba(99, 154, 220, 0.2) 70%, rgba(255, 255, 255, .2), rgba(162, 209, 137, .2));
  filter: blur(10em);
  z-index: -1;
  width: calc(100% - 30%);
  margin-right: auto;
  overflow: hidden;
}

<section id="shadow">
  <div class="container">
    <div class="row">
      <div class="col-lg-12 col-md-6 col-sm-12">
        <p>
          The Quick Brown Fox jumps over the lazy Dog
        </p>
      </div>
    </div>
</section>

Answer 1

尝试这个，如果有它们与您的完整代码不匹配，请告诉我。

 #shadow {
            position: relative;
            padding: 1rem;
            overflow: hidden;
            background: white;
        }
        #shadow::after {
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            height: 100%;
            width: 100%;
            background: linear-gradient(to right, rgba(99, 154, 220, 0.2), rgba(255, 255, 255, 0) 70%);
            filter: blur(10em);
            z-index: -1;
            transform: translateX(-30%);
        }

<section id="shadow">
    <div class="container">
        <div class="row">
            <div class="col-lg-12 col-md-6 col-sm-12">
                <p>
                    The Quick Brown Fox jumps over the lazy Dog
                </p>
            </div>
        </div>
    </div>
</section>