如何用css畫一個彩虹---v客學院技術分享

無心間看到了CSS radial-gradient() 函數實現了以下圖的樣式php

 

 

 

仔細一看還真有點像燈光下的雞蛋,O(_)O哈哈~css

 

今天我就來用radial-gradient()函數教你們畫一個簡單的彩虹吧~~~~html

語法請參照此連接http://www.runoob.com/cssref/func-radial-gradient.html前端

 

1.首先畫好結構,也就是在網頁中畫一個divweb

 

 

2.接着爲div設置border-radius100%,也就是直徑爲260個像素,使其變成了一個圓瀏覽器

 

 

3.而後爲這個圓,也就是.box設置radial-gradient()函數(這裏的moz,webkit前綴是爲了兼容不一樣內核的瀏覽器)函數

 

 

 

經過以上3步,咱們實現效果以下:ui

 

 

額。。。。。。。。。。。應該沒有人見過如此圓潤的彩虹吧。。。。。。spa

是的,若是能裁掉一半就perfect了。ssr

其實實現很簡單,咱們只須要寫一個跟背景顏色同樣的div固定在「圓潤彩虹「的下半邊就ok啦!

 

 

 

完整代碼以下:

 

 

 

php開發,web前端,ui設計,vr開發專業培訓機構,v客學院版權全部,轉載請註明出路,謝謝!!!)

相關文章
相關標籤/搜索