CSS：线性渐变——背景渐变、文字渐变、边框渐变、鼠标移入背景色向上切换、浏览器内核、渐变色彩搭配

好的颜色搭配加渐变其实是非常网站加分的，你还在用纯色背景吗？快来感受一下渐变的带来的快乐吧~

现在就让我们先来熟悉一下语法吧！

线性渐变：

为了创建一个线性渐变，你必须至少定义两种颜色结点。颜色结点即你想要呈现平稳过渡的颜色。同时，你也可以设置一个起点和一个方向（或一个角度）。

从上到下的线性渐变：

[code]#grad { background-image: linear-gradient(#e66465, #9198e5); }

从左到右的线性渐变：

[code]#grad { height: 200px; background-image: linear-gradient(to right, red , yellow); }

从左上角到右下角的线性渐变：

[code]#grad { height: 200px; background-image: linear-gradient(to bottom right, red, yellow); }

带有指定的角度的线性渐变：

[code]#grad { background-image: linear-gradient(-90deg, red, yellow); }

带有多个颜色结点的从上到下的线性渐变：

[code]#grad { background-image: linear-gradient(red, yellow, green); }

从左到右的线性渐变，带有透明度：

[code]#grad { background-image: linear-gradient(to right, rgba(255,0,0,0), rgba(255,0,0,1)); }

一个重复的线性渐变：

[code]#grad { /* 标准的语法 */ background-image: repeating-linear-gradient(red, yellow 10%, green 20%); }

语法学得差不多了，就让我们看看渐变在实际上的运用吧~

实际运用:

1.背景渐变

[code].bg {width: auto;padding: 0 8px;height: 30px;background-color: rgba(246,79,109,0.8);line-height: 30px;background-image: linear-gradient(45deg,rgba(246,79,109,0.8)0%,rgba(254, 119, 96, 0.8)100%);text-align: center;border-radius: 5px;font-size: 12px;}

2.文字渐变

[code].verificationTitle {background: -webkit-gradient(linear,left top,right top,from(#7fb6f7),to(#9000FF));-webkit-background-clip: text;/*规定背景的绘制区域*/-webkit-text-fill-color: transparent;/*指定文字的填充颜色*/}

只有文字的填充色为透明，设置的渐变背景色才会显示出来

3.边框渐变

[code].border{width: 380px;height: 60px;background: #fff;border: 1px transparent solid;border-image: linear-gradient(to right,#59a5ff,#6e6bff) 1 10;border-radius: 5px;}

border-image括号后两个参数为必写参数，原为四个参数，也可写作两个

4.背景色滚动切换

[code].item {height: 43px;width: 560px;background: linear-gradient(#ffffff 50%, #1e82e8 50%);/*哪个颜色在前就先显示哪个颜色*/background-size: 100% 200%;/*铺满白色，隐藏蓝色*/background-position: 0 0%;/*隐藏蓝色*/}.item:hover {background-position: 0 100%;/*显示蓝色，隐藏白色*/cursor: pointer;}

此效果为鼠标移入蓝色从底下往上铺满，因为渐变方向默认为从上到下

提示：为了更好的兼容浏览器，渐变第一个参数最好带上浏览器内核（如-webkit-）

这篇主题围绕线性渐变展开，那当然少不了颜色搭配啦~

渐变色彩搭配：

​

更多配色方法自行搭配或见色彩搭配网站。

此文章仅作为学习交流使用，如有更好的想法请在下方评论~