Html css3圆形发光像月光发光

我正试图创造一个发光的月亮。与图像中的相同

我已经试过了，但不太成功

我不想在网站上使用图像。我只想用CSS3创建这个

---

我的圆圈非常小，而且发光区域也很小。我希望在大半径区域发光

Html

<div>
    <span>Glow</span>
</div>

---

将此样式替换为您的

框阴影

：

box-shadow: 0 0 0 10px red;

试试这个：

box-shadow: 0 0 10px red;

编辑：如果希望光晕更大，只需增加半径：

box-shadow: 0 0 30px red;

---

使用

框阴影

：）

此示例使用两个逗号分隔的阴影：

  box-shadow:0 0 50px gold,0 0 150px gold;

你也可以用径向梯度画。

---

结果会因浏览器而异。

我相信这就是您想要的：

span:hover {
    -webkit-border-radius: 70px;
    -moz-border-radius: 70px;
    border-radius: 70px;   
    -webkit-box-shadow:0px 0px 10px red;
    -moz-box-shadow: 0px 0px 10px red;
    box-shadow: 0px 0px 10px red;
}

---

演示：

我不知道你在那里用HTML做什么。请将CSS与HTML分开。此外，我认为您可以安全地在转换时使用方框阴影（）的

-moz

前缀和

-moz

、

-ms

和

-o

前缀。(). 编辑：边界半径根本不需要前缀。；）我的圆圈非常小，而且发光区域也很小。我想在大半径区域发光。。。先生，更新在哪里。更新完成了，只需点击上面写着JSFIDLE的地方，你的链接创建了这个链接，这是你的吗？？？没有任何更新。这是你小提琴的更新。我的回答解释了如何解决您的问题，链接就是我解释的一个例子。这不是“太多参数，

box shadow

可以接受四个数字参数和颜色。第四个数字给出了“非衰落扩展”（这是我能描述它的最好方式，尽管它是一个完全虚构的定义）。你能更清楚地指导我解决这个问题吗？你的阴影需要更大，为了加强它，你需要使用多个阴影，这样它就不会消失得太快。在本例中，两个阴影与前50像素重叠。您甚至可以使用第四个参数框阴影来增加效果：0 50px 10px黄金、0 150px 10px黄金；阴影的前10像素将具有非常高的不透明度（接近1）

span:hover {
    -webkit-border-radius: 70px;
    -moz-border-radius: 70px;
    border-radius: 70px;   
    -webkit-box-shadow:0px 0px 10px red;
    -moz-box-shadow: 0px 0px 10px red;
    box-shadow: 0px 0px 10px red;
}