line-gradient 之漸變角度


  MDN上對於linear-gradient的定義如下:

  CSS linear-gradient() 函數用於創建一個表示兩種或多種顏色線性漸變的圖片。其結果屬於<gradient>數據類型,是一種特別的<image>數據類型。

  在css中漸變就是backgroundbackground-image,也就是說,使用背景圖像的css屬性都適合漸變。下邊我重點記錄下漸變角度。

  

  注:圖來自於https://www.w3cplus.com/css3/do-you-really-understand-css-linear-gradients.html

  MDN對於漸變角度的定義:to top, to bottom, to left 和 to right這些值會被轉換成角度0度、180度、270度和90度。

  如上圖所示,我們平時要寫的角度就是上圖中的A的值,漸變線方向為to right top,也就是從左下方漸變到右上方,注意那條虛線,它是過漸變容器(圖中矩形)中點的垂線,注意:虛線的的位置是不變的(在你改變漸變角度的時候,實際上就是漸變線繞着C點在旋轉),虛線和漸變線方向的角度就是漸變角度,等於圖中的A的值45度。

  參考資料:

  你真的理解CSS的linear-gradient

  深入理解CSS3 gradient斜向線性漸變

  mdn  linear-gradient

 

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM