html - css3圆形发光像月光一样发光

我正在尝试用光辉创造一个月亮。与图片相同。

我已经尝试过但是没有成功。

我不想在网站中使用图片。我只想用CSS3创建它。

我的圈子很小，而且发光面积很小。我想在大半径区域发光

http://jsfiddle.net/naresh_kumar/ezUfG/6/

HTML

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

CSS

div {
    margin: 20px 10px 10px;
    text-align: center;
    font-family: sans-serif;
}

span {
    display: inline-block;
    padding-top: 40px;
    background: whiteSmoke;
    width: 100px;
    height: 60px;
    text-align: center;
    vertical-align: middle;

    -webkit-box-shadow: 0 0 10px #F8A50E;
       -moz-box-shadow: 0 0 10px #F8A50E;
            box-shadow: 0 0 10px #F8A50E;

    -webkit-border-radius: 50px;
       -moz-border-radius: 50px;
            border-radius: 50px;

    -webkit-transition: box-shadow .4s ease;
       -moz-transition: box-shadow .4s ease;
        -ms-transition: box-shadow .4s ease;
         -o-transition: box-shadow .4s ease;
            transition: box-shadow .4s ease;
}

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

最佳答案

使用box-shadow :)

本示例使用两个逗号分隔的阴影:

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

http://codepen.io/gcyrillus/pen/qdcos

您也可以使用径向渐变绘制它。
结果会因浏览器而异。

关于html - css3圆形发光像月光一样发光，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/17189630/