如何使用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