無心間看到了CSS radial-gradient() 函數實現了以下圖的樣式php
仔細一看還真有點像燈光下的雞蛋,O(∩_∩)O哈哈~css
今天我就來用radial-gradient()函數教你們畫一個簡單的彩虹吧~~~~html
語法請參照此連接http://www.runoob.com/cssref/func-radial-gradient.html前端
1.首先畫好結構,也就是在網頁中畫一個divweb
2.接着爲div設置border-radius爲100%,也就是直徑爲260個像素,使其變成了一個圓瀏覽器
3.而後爲這個圓,也就是.box設置radial-gradient()函數(這裏的moz,webkit前綴是爲了兼容不一樣內核的瀏覽器)函數
經過以上3步,咱們實現效果以下:ui
額。。。。。。。。。。。應該沒有人見過如此圓潤的彩虹吧。。。。。。spa
是的,若是能裁掉一半就perfect了。ssr
其實實現很簡單,咱們只須要寫一個跟背景顏色同樣的div固定在「圓潤彩虹「的下半邊就ok啦!
完整代碼以下:
(php開發,web前端,ui設計,vr開發專業培訓機構,v客學院版權全部,轉載請註明出路,謝謝!!!)