[css] 用css畫一個太陽

// css.sun {margin: 200px;width: 200px;height: 200px;border-radius: 50%;background: red;box-shadow: 0 0 21px #fe9e9e;position: relative;}// ::before & ::after 輔助.sun::before {width: 0;height: 500px;content: '';border-left: 1px solid blue;position: absolute;top: -150px;left: 100px;z-index: 100;transform: rotate(45deg);}.sun::after {width: 500px;height: 0;content: '';border-top: 1px solid blue;position: absolute;top: 100px;left: -150px;z-index: 100;transform: rotate(45deg);}// 光線的寬高據 sun-body 而動.sun-light {width: 100px;height: 6px;background: yellow;position: absolute;left: 0;top: 0;}.sl1 {left: 50px;top: -58px;transform: rotate(90deg);}.sl2 {top: -14px;left: 160px;transform: rotate(-45deg);}.sl3 {top: 97px;left: 205px;}.sl4 {top: 206px;left: 160px;transform: rotate(45deg);}.sl5 {top: 252px;left: 50px;transform: rotate(90deg);}.sl6 {top: 206px;left: -60px;transform: rotate(-45deg);}.sl7 {top: 97px;left: -105px;}.sl8 {top: -14px;left: -60px;transform: rotate(45deg);}<!-- html --><div class="sun"><div class="sun-light sl1"></div><div class="sun-light sl2"></div><div class="sun-light sl3"></div><div class="sun-light sl4"></div><div class="sun-light sl5"></div><div class="sun-light sl6"></div><div class="sun-light sl7"></div><div class="sun-light sl8"></div></div>

個人簡介

我是歌謠，歡迎和大家一起交流前后端知識。放棄很容易，
但堅持一定很酷。歡迎大家一起討論

主目錄

與歌謠一起通關前端面試題

總結

以上是生活随笔為你收集整理的[css] 用css画一个太阳的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。