CSS3新樣式 linear-gradient 小測試線性漸變效果

模仿生成美團官網的導航欄

如圖

• 爲了達到這個效果，咱們先作一個盒子div
• 如圖，背景顏色設置爲粉色pink

• 按照網上找的屬性，設置樣式
• backgroun: top, pink, skyblue;
• VScode提示錯誤
• Gradient has outdated direction syntax. New syntax is like 'to left' instead of 'right'.
• 上面這個錯誤的意思大概是，以前的語法是過期的，新的語法 是 to left 來取代以前的直接寫方向 right
• 咱們根據上面的錯誤把樣式改爲
• backgroun: to top, pink, skyblue;
• 效果以下

• 能夠看到新語法 to top/left/right/bottom 能夠更直觀告訴咱們漸變的方向是向着哪邊的，第二個參數是起始顏色，第三個參數是完成顏色，
• 查看文檔發現這個CSS3新樣式須要對不一樣的瀏覽器作不一樣的適配，以下

#grad {
  background: -webkit-linear-gradient(left top, red , blue); /* Safari 5.1 to 6.0 */
  background: -o-linear-gradient(bottom right, red, blue); /* Opera 11.1 to 12.0 */
  background: -moz-linear-gradient(bottom right, red, blue); /* Firefox 3.6 to 15 */
  background: linear-gradient(to bottom right, red , blue); /* 標準語法 */
} 
複製代碼