如何在普通div中使用CSS实现glow元素，如下所述？

Question

我正在尝试使用CSS将PSD转换为HTML。

我有一个像这样的普通矩形：

现在是一个椭圆形的发光元素:(如在PSD中）

因此，如果你只看一个矩形，顶部有一个发光，它看起来如下：

如何实现同样的目标？任何领导都表示赞赏：）

Answer 1

我能看到的唯一方法是使用伪元素并在其上放置渐变背景。我很快就向你展示了它，但它并没有完全重现你的形象：

.rectangle {
  position: relative;
  width: 300px;
  height: 100px;
  background-color: #112D43;
}
.rectangle:after {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  right: 0;
  width: 100px;
  height: 40px;
  background: radial-gradient(ellipse at center, #094567 0%, rgba(0, 0, 0, 0) 50%);
}

<div class="rectangle"></div>

Answer 2

使用径向渐变：

您可以通过在纯色矩形顶部放置radial-gradient图像来实现这一目标。可能需要修改渐变的位置和大小以满足您的需要。

我使用的radial-gradient与PSD图像中的div { height: 200px; width: 400px; background-color: rgb(17, 45, 67); background-image: radial-gradient(ellipse at 75% -25%, rgb(14, 102, 150) 0%, transparent 50%); background-size: 100% 100%; }非常相似。那是从蓝色开始，然后逐渐变为透明。然后定位该梯度，使其中心点为父母宽度的75％，距离父母高度的25％。

＆＃13;

＆＃13;

<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
<div></div>

＆＃13;

radial-gradient

＆＃13;

＆＃13;

＆＃13;

使用box-shadow时，担心的主要问题是relatively poor browser support。

使用Box Shadow：

下面是使用伪元素和box-shadow的稍微不同的方法。 radial-gradient具有非常高的扩散半径，产生类似光晕的效果。

这比box-shadow具有更好的浏览器支持（即使与IE8一样低），但div { position: relative; width: 1280px; height: 480px; background-color: rgb(17, 45, 67); overflow: hidden; } div:after { position: absolute; content: ''; right: 150px; top: -250px; height: 250px; width: 300px; border-radius: 50%; background: rgb(14, 102, 150); box-shadow: 25px 25px 150px 250px rgba(14, 102, 150, 0.5); }无法获取百分比值，因此此解决方案对于动态大小的容器不会非常有用。 / p>

＆＃13;

＆＃13;

<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
<div></div>

＆＃13;

'

＆＃13;

＆＃13;

＆＃13;