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); /* 标准语法 */
} 
复制代码

转载于:https://juejin.im/post/5cf53bfd6fb9a07ecf721081