Vòng tròn css3 sáng như ánh sáng mặt trăng Ánh sáng

Question

Tôi đang cố gắng tạo ra một mặt trăng với ánh sáng rực rỡ. giống như trong hình ảnh.

tôi đã thử nhưng không thành công nhiều.

Tôi không muốn sử dụng hình ảnh trong trang web. tôi muốn tạo chỉ với CSS3.

Vòng tròn của tôi đang tạo ra rất nhỏ và cũng phát sáng ở khu vực nhỏ. tôi muốn phát sáng trong khu vực bán kính lớn

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

Answer 1

sử dụng box-shadow :)

Ví dụ này sử dụng hai dấu phẩy tách ra bóng tối:

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

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

Bạn có thể vẽ nó với radial gradient quá. Kết quả sẽ biến đổi từ trình duyệt thành trình duyệt.

Answer 2

Thay vì phong cách này cho box-shadow của bạn:

box-shadow: 0 0 0 10px red; 

Hãy thử điều này:

box-shadow: 0 0 10px red; 

Edit: Nếu bạn muốn ánh sáng là lớn hơn, chỉ tăng bán kính:

box-shadow: 0 0 30px red; 

jsFiddle here

Answer 3

Tôi tin rằng đây là những gì bạn muốn:

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

Demo: http://jsfiddle.net/ezUfG/10/