今天我想跟大家分享的是一個很有趣的小玩意，那就是CSS小小的太陽。

如果你喜歡在網站上加入一些趣味性的小細節，那么這個小太陽肯定會是一個很好的選擇。接下來，我將向大家詳細介紹如何實現這個小太陽。

.sun {
height: 100px; 
width: 100px;
background: radial-gradient(circle, #FFE300 0%, #FFE300 60%, transparent 70%);}
.sun:after {
content: ""; 
position: absolute;
top: 10px; 
left: 10px; 
width: 20px; 
height: 20px; 
background: #FBBB00; 
border-radius: 50%;}
.sun:before {
content: ""; 
position: absolute;
top: 4px; 
left: 4px; 
width: 32px; 
height: 32px; 
background: #FDD835; 
border-radius: 50%;}

首先，我們需要一個圓形的背景色，這可以通過CSS的徑向漸變實現。設置容器（.sun）的高度和寬度，然后在background屬性中使用radial-gradient()函數來定義徑向漸變。在這個例子中，我們使用了黃色從中心開始向外擴散的徑向漸變，60%處漸變結束，然后之后的70%部分是透明的，形成了太陽的光芒。

接下來，我們需要太陽的臉，也就是中間的小圓。在CSS中，可以使用:before和:after偽元素分別在元素的前面或后面插入內容。這些偽元素本質上就是容器，可以使用CSS樣式來設置它們的大小和樣式。我們可以使用:after偽元素創建太陽的臉，并將它的背景色設置為橙色。同時，我們可以使用:before偽元素創建圓圈的邊框，并將其背景色設置為更淺的黃色。

最后，我們在HTML中創建一個空的