模仿生成美团官网的导航栏
如图
- 为了达到这个效果,我们先做一个盒子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); /* 标准语法 */} 复制代码