前几天在浏览其他博客网站的时候看到导航栏使用的背景挺好看的，抱着学习的态度按键盘的F12按键打开了浏览器的调试控制台定位到了导航栏，可是怎么定位都定位不到那个背景（一开始以为是张图片），后面发现样式调试框的background-image属性那边有显示了颜色代码，替换了其中一个颜色代码后发现导航栏变色了，复制了下background-image样式中linear-gradient属性百度了下是做什么用的得到的答案是实现线性渐变，知道答案后开始着手使用CSS样式的中的linear-gradient属性魔改网站，简单写个教程记录下linear-gradient使用方法（以免下次自己忘记了），同时也给需要同学提供一丢丢帮助吧！！

CSS样式属性linear-gradient解释

linear-gradient() 函数用于创建一个表示两种或多种颜色线性渐变的图片。创建一个线性渐变，需要指定两种颜色，还可以实现不同方向（指定为一个角度）的渐变效果，如果不指定方向，默认从上到下渐变。

CSS样式属性linear-gradient用法

在CSS样式表添加样式，例如添加如下样式参数，然后网页页面调用添加的样式

默认使用方法

.style {
    background-image: linear-gradient(#dbd9d9,#6bbbd3,#576ba1,#ffffff);
}

效果图

渐变轴为45度

.style {
    background-image: linear-gradient(45deg,#dbd9d9,#6bbbd3,#576ba1,#ffffff);
}

效果图

从右下到左上

.style {
    background-image: linear-gradient(to left top,#dbd9d9,#6bbbd3,#576ba1,#ffffff);
}

效果图

从下到上，渐变轴为90度到高度40%位置渐变开始

.style {
    background-image: linear-gradient(90deg,#dbd9d9,#6bbbd3 40%,#576ba1,#ffffff);
}

效果图

OK，教程已结束，记录下以免下次忘记怎么使用，同时也给新手小白一丢丢帮助，更多玩法大家可以自行百度搜索使用方法。