CSS – 渐变

简介

渐变是 CSS3 当中比较丰富多彩的一个特性，通过渐变我们可以实现许多炫丽的效果，有效的减少图片的使用数量，并且具有很强的适应性和可扩展性。可分为线性渐变、径向渐变

linear-gradient 线性渐变

线性渐变指沿着某条直线朝一个方向产生渐变效果

语法：linear-gradient(参数 或 具体角度 stop stop...)

参数说明

第一个参数表示线性渐变的方向，

to left 设置渐变为从右到左，相当于 270 deg

to right 设置渐变从左到右。相当于90 deg

to top 设置渐变从下到上。档当于：0 deg

to bottom（默认值） 设置渐变从上到下。相当于180deg.等同于留空不写，也可以直接指定度数，如45deg

第二个参数是起点颜色，可以设定颜色的位置

第三个参数是终点的颜色，你还可以在后面添加更多的参数，表示多种颜色的渐变。

示例：background-color: linear-gradient(方向,开始颜色,位置,方向2,颜色2,位置2,...);

background-color: linear-gradient(red, blu);  从上到下的红到蓝

background-color: linear-gradient(to right , red 0%, green 50%, blue 100%);  从左到右的红-绿-蓝

radial-gradient 径向渐变

径向渐变指从一个中心点开始沿着四周产生渐变效果

语法：radial-gradient(形状，)

第一个参数主值 shape 为形状

circle:产生正方型的渐变色

ellipse:适配当前的形状，如果是正方形的容器，两者的效果一样。

第一个参数次值 position 为正中心坐标

at left

at center 默认

at right

at top

at bottom

at 坐标 可以给一个，也可以给两个坐标，如果只给一个参数，第二值默认为50%

第一个参数次值 size 为渐变大小

渐变的大小，即渐变到哪里停止，它有四个值

closest-side  最近边

farthest-side  最远边

closest-corner  最近角

farthest-corner  最远角。默认值

第二个参数为指定渐变颜色

略

示例：

background: radial-gradient(circle farthest-corner at 50px 50px, red, blue);

指的是中心在 50px 50px 坐标上，正圆渐变辐射，辐射到离中心最远的角停止，颜色从红色0%到蓝色100%

repeating-radial-gradient 重复渐变

background: repeating-radial-gradient(
circle farthest-corner at center center,
red 0%, red 10%, 
blue 10%, blue 20%);

圆心在中间，扩展到最远的角，使用正圆辐射，红色从0%到10%变为蓝，蓝色从10%到20%变为红，如此类推。