css3 渐变
渐变分线性渐变(linear-gradient)和径向渐变(radial-gradient);这里写的代码省去了-webkit-,-moz-,-o-这些前缀,使用的时候不要忘记.
线性渐变(linear-gradient)
下面几个属性分开介绍
渐变方向
默认的渐变方向:从上到下 可以采用角度的方式指定方向:如 默认方向(从上到下),也即180deg方向 html :
1 | <div></div> |
|---|
css:
12345 | div { height: 100px; width: 200px; background-image: linear-gradient(red, blue);} |
|---|
45度方向(左下到右上) html :
1 | <div></div> |
|---|
css:
12345 | div { height: 100px; width: 200px; background-image: linear-gradient(45deg, red, blue);} |
|---|
按照下图,
以此类推: 0deg : 从 下 到 上 45deg: 从 左下 到 右上 90deg: 从 左 到 右 135deg: 从 左上 到 右下 180deg: 从 上 到 下 270(-90)deg: 从 右 到 左 … 表示方向还有另外一种方式, 例如将”45deg”换成”to right top” ,或者换成”left bottom”,都表示一样的效果,个人习惯使用角度,其他不演示了.
渐变颜色
写在前面的是初始颜色,写在后面的是结束颜色;就像我们以上例子中所写的. 我们可以使用rgb,rgba,十六进制或者像以上例子中语义化的颜色值来表示渐变颜色; 如果需要用到透明度,需要使用rgba
渐变位置
html :
1 | <div></div> |
|---|
css:
12345 | 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 :
1 | <div></div> |
|---|
css:
12345 | div { height: 100px; width: 200px; background: repeating-linear-gradient(90deg, red 10%, blue 20%);} |
|---|
径向渐变(radial-gradient)
径向渐变是由中心向外渐变的。可以控制它的中心(默认渐变是中心是center),形状（圆形或者椭圆形）,大小,以及上面讲到的渐变范围等。 html :
1 | <div></div> |
|---|
css:
12345 | div { height: 100px; width: 200px; background: radial-gradient(red 20%, blue 80%);} |
|---|
