如何用CSS做出这样的渐变太阳效果？

Question

有没有办法只用 css 制作这样的渐变？

我试过使用 background-position 标签

但它对我不起作用，可能是因为我不知道精灵是如何工作的。

Answer 1

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

circle 150px表示是半径为150px的圆形渐变
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

Answer 3

three{
width:100%;
height:300px;
border:1px solid white;    
 background-image:radial-gradient( circle 80px at 25% 25% , rgb(255,255,255) 10%,rgba(251, 255, 185, .7), rgb(255,255,255) 60% 70%,rgb(2,153,218) 200%);}

如果你愿意，可以改变它的位置。

如何用CSS做出这样的渐变太阳效果？

How to make like this gradient sun effect using CSS?

css

radial-gradients