css3的渐变总结

关于渐变

由两种或多种颜色之间的渐进过渡组成。线性 (由 linear-gradient 函数创建)，径向(由 radial-gradient() 函数创建) 。您还可以使用 repeating-linear-gradient 和 repeating-radial-gradient 函数创建重复渐变。由于渐变是动态生成的，因此它们可以消除对传统用于实现类似效果的栅格图像文件的需求。此外，渐变效果的元素在放大时看起来效果更好，因为渐变（gradient）是由浏览器生成的。

1、线性渐变

基础用法：background:linear-gradient(angle,start-color,soft-line,end-color);

从上到下的渐变（默认情况）：background-image: linear-gradient(blue,red);

从左到右的渐变：background-image: linear-gradient(to right, red , yellow);

对角的渐变：background-image: linear-gradient(to bottom right, red, yellow);

如果你想要更精确地控制渐变的方向，你可以给渐变设置一个具体的角度。如：background-image: linear-gradient(70deg, red, yellow);

0deg 代表渐变方向为从下到上, 90deg 代表渐变方向为从左到右

无需局限于使用两种颜色，你想使用多少种颜色都可以！ 默认情况下，所设置颜色会均匀分布在渐变路径中。

background-image: linear-gradient(to right, red,orange,yellow,green,blue,indigo,violet);    一个带有彩虹颜色的线性渐变

自定义颜色的终止位置：background: linear-gradient(to left, lime 28px, red 77%, cyan);     0% 表示起始点, 而100%表示终点

一个去渐变的硬线分割写法：background-image: linear-gradient(blue 50%,red 50%);

使用透明度：background-image: linear-gradient(to right, rgba(255,0,0,0), rgba(255,0,0,1));

rgba() 函数中的最后一个参数可以是从 0 到 1 的值，它定义了颜色的透明度：0 表示完全透明，1 表示完全不透明。

配合背景图使用时，注意渐变效果要写在url引入的背景图之前：background: linear-gradient(transparent ,#000 ) url(/img/1.png);

repeating-linear-gradient() 函数用于重复线性渐变：background-image: repeating-linear-gradient(red, yellow 10%, green 20%);

2、径向渐变

语法：background-image: radial-gradient(shape size at position, start-color, ..., last-color);

 shape即渐变的形状，不写则为默认的ellipse椭圆，可以改为circle正圆。size 参数定义了渐变的大小。它可以是：closest-side farthest-side closest-corner farthest-corner

颜色节点均匀分布的径向渐变：background-image: radial-gradient(red, yellow, green);

颜色节点不均匀分布的径向渐变：background-image: radial-gradient(red 5%, yellow 15%, green 60%);

带有不同尺寸大小关键字的径向渐变：background-image: radial-gradient(closest-side at 60% 55%, red, yellow, black);

一个重复的径向渐变：background-image: repeating-radial-gradient(red, yellow 10%, green 15%);

分享一个好看的渐变网站：https://webgradients.com/

可以直接复制css或保存渐变的图片