如何使用CSS制作像这种渐变太阳效果？

Question

有没有办法让渐变像这样只有css http://imgur.com/dA7RcsQ？

我试着使用background-position标签

但它并没有为我工作可能是因为我不知道精灵是如何工作的。

Answer 1

这是一个简单的径向渐变。这应该会让你走上正轨。

• circle 150px说，这是一个渐变的圆形半径150像素
• at 25% 33%定义原点（我直勾勾它1/4从顶部的左侧和1/3）您也可以使用PX或其他长度。
• 最后从中心给出颜色。

div{ 
 
    height: 200px; 
 
    border: 1px solid; 
 
    background-image: radial-gradient(circle 150px at 25% 33%, white, yellow, lightyellow, aqua); 
 
}

<div></div>

Answer 2

径向渐变是相当容易的。这里有一个例子 -

#gradient { 
height: 150px; 
width: 150px; 
background: -webkit-radial-gradient(60% 55%, farthest-side,blue,green,yellow,black); /* Safari 5.1 to 6.0 */ 
background: -o-radial-gradient(60% 55%, farthest-side,blue,green,yellow,black); /* For Opera 11.6 to 12.0 */ 
background: -moz-radial-gradient(60% 55%, farthest-side,blue,green,yellow,black); /* For Firefox 3.6 to 15 */ 
background: radial-gradient(farthest-side at 60% 55%,blue,green,yellow,black); /* Standard syntax (must be last) */ 
} 

文档在这里 - http://www.w3schools.com/css/css3_gradients.asp