带阴影的发光盒效果答案

【问题标题】：Glowing box effect with shadow带阴影的发光盒效果
【发布时间】：2019-05-04 11:51:37
【问题描述】：

我的样式框有问题。我需要在底部框中创建带有阴影的发光效果。我在创建这个效果时被卡住了。

我需要创建的发光效果：

我尝试创建这个效果，但看起来很糟糕

html,
body {
  width: 100%;
  height: 100%;
  margin:0;
}

.container {
  background-color: black;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items:center;
}

.glow {
  width: 60%;
  height: 0px;
  border-radius: 50%;
  background-color: #fff;
  box-shadow: 0 0 20px 0px yellow, 0 0 20px 10px #ffc600, 0px 0px 20px 0px yellow;
}

<div class="container">
  <div class="glow"></div>
</div>

【问题讨论】：

展示你尝试过的，制作一个sn-p。
我添加了codepen的链接
大师来了！！ XD :D

标签： css border glow

【解决方案1】：

您可以使用背景着色和一些过滤器来近似此效果

.glow {
  height:40px;
  margin:50px;
  background:
    radial-gradient(190px 20px,white, gold 15%,transparent 30%),
    linear-gradient(to right,transparent, gold,transparent) center/100% 5px no-repeat;
  border-radius:100%;
  position:relative;
  filter:blur(1px);
}
.glow:before {
  content:"";
  position:absolute;
  top:0;
  left:0;
  right:0;
  bottom:0;
  background:inherit;
  filter:blur(7px);
}

body {
 background:#000;
}

&lt;div class="glow"&gt;&lt;/div&gt;

【讨论】：