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

2022-07-25 02:09:08 字數 979 閱讀 2643

無意間看到了css radial-gradient() 函式實現了如下圖的樣式

仔細一看還真有點像燈光下的雞蛋,o(∩_∩

)o哈哈

~今天我就來用radial-gradient()函式教大家畫乙個簡單的彩虹吧~~~~

語法請參照此鏈結

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

2.接著為

div設定

border-radius

為100%

,也就是直徑為

260個畫素,使其變成了乙個圓

3.然後為這個圓,也就是

.box

設定radial-gradient()函式(這裡的moz,webkit字首是為了相容不同核心的瀏覽器)

通過以上3步,我們實現效果如下:

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

是的,如果能裁掉一半就perfect了。

其實實現很簡單,我們只需要寫乙個跟背景顏色一樣的div固定在「圓潤彩虹「的下半邊就

ok啦!

完整**如下:

(php開發

,web

前端,ui

設計,vr

開發專業培訓機構,

v

CSS 畫乙個心

效果圖 實現原理 可以把這個心分為兩部分,兩個長方形,分別設定 border radius,transform rotate 設定屬性之後 再次新增乙個,設定相反的 rotate 設定其中乙個的 left 值 就成了 為了看起來有立體感,可以設定左邊的 box shadow cssbodydivdi...

CSS 畫乙個心

效果圖 實現原理 可以把這個心分為兩部分,兩個長方形,分別設定 border radius,transform rotate 設定屬性之後 再次新增乙個,設定相反的 rotate 設定其中乙個的 left 值 就成了 為了看起來有立體感,可以設定左邊的 box shadow cssbodydivdi...

如何用C語言畫乙個聖誕樹?

我使用了左右映象的sierpinski 每層減去上方一小塊,再用符號點綴。可生成不同層數的 聖誕樹 如下圖是5層的結果。基本 來自sierpinski 的實現,字元的想法來自於code golf draw a sierpinski 更新1 上面的是我嘗試盡量用最少 來畫乙個抽象一點的聖誕樹,因此樹幹...