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

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图片里的非常相似。也就是从蓝色开始，然后逐渐变为透明。然后定位此渐变，使其中心点位于父级宽度的 75% 处，距离为父级高度的 25%。

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%;
}

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

使用 radial-gradient 时 主要担心 的是 relatively poor browser support。

使用框阴影：

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

这比 radial-gradient 有更好的浏览器支持（甚至低至 IE8），但 box-shadow 不能采用百分比值，因此该解决方案对动态大小的容器不是很有用。

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);
}

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

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

How to achieve glow element using CSS in plain div like described below?

html

css

radial-gradients