渐变分线性渐变(linear-gradient)和径向渐变(radial-gradient);这里写的代码省去了-webkit-,-moz-,-o-这些前缀,使用的时候不要忘记.
线性渐变(linear-gradient)
image.png
下面几个属性分开介绍
渐变方向
默认的渐变方向:从上到下
可以采用角度的方式指定方向:如
默认方向(从上到下),也即180deg方向
html :
<div></div>
css:
div { height: 100px; width: 200px; background-image: linear-gradient(red, blue);
}默认方向(从上到下)
45度方向(左下到右上)
html :
<div></div>
css:
div { height: 100px; width: 200px; background-image: linear-gradient(45deg, red, blue);
}45度方向(左下到右上)
按照下图,
方向示意图
以此类推:
0deg : 从 **下 **到 上
45deg: 从 **左下 **到 右上
90deg: 从 **左 **到 右
135deg: 从 **左上 **到 右下
180deg: 从 **上 **到 下
270(-90)deg: 从 **右 **到 左
...
表示方向还有另外一种方式,
例如将"45deg"换成"to right top" ,或者换成"left bottom",都表示一样的效果,个人习惯使用角度,其他不演示了.
渐变颜色
写在前面的是初始颜色,写在后面的是结束颜色;就像我们以上例子中所写的.
我们可以使用rgb,rgba,十六进制或者像以上例子中语义化的颜色值来表示渐变颜色;
如果需要用到透明度,需要使用rgba
渐变位置
html :
<div></div>
css:
div { height: 100px; width: 200px; background-image: linear-gradient(90deg, red 20%, blue 80%);
}渐变位置
这个渐变位置也就是我们颜色值后面的百分比,这一点不常用,很多人容易把它搞混.
拿上例来说,
20%表示在渐变这条线上,从渐变长度的20%处开始渐变,20%之前的都是纯red色;
80%表示,到渐变长度的80%处停止渐变,80%之后的都是纯blue色;
也就是说,渐变区间是渐变这条线上,20%-80%这一区间;
默认的渐变区间是0%-100%.
重复线性渐变
repeat-linear-gradient函数用于创建重复的线性渐变
html :
<div></div>
css:
div { height: 100px; width: 200px; background: repeating-linear-gradient(90deg, red 10%, blue 20%);
}重复的线性渐变
径向渐变(radial-gradient)
径向渐变是由中心向外渐变的。可以控制它的中心(默认渐变是中心是center),形状（圆形或者椭圆形）,大小,以及上面讲到的渐变范围等。
html :
<div></div>
css:
div { height: 100px; width: 200px; background: radial-gradient(red 20%, blue 80%);
}径向渐变
作者：前端渣渣
链接：https://www.jianshu.com/p/10d593a76378