css3jianm,css3 渐变

渐变分线性渐变(linear-gradient)和径向渐变(radial-gradient);这里写的代码省去了-webkit-,-moz-,-o-这些前缀,使用的时候不要忘记.

线性渐变(linear-gradient)

image.png

下面几个属性分开介绍

渐变方向

默认的渐变方向:从上到下

可以采用角度的方式指定方向:如

默认方向(从上到下),也即180deg方向

html :

css:div {    height: 100px;    width: 200px;    background-image: linear-gradient(red, blue);

}

默认方向(从上到下)

45度方向(左下到右上)

html :

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 :

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 :

css:div {    height: 100px;    width: 200px;    background: repeating-linear-gradient(90deg, red 10%, blue 20%);

}

重复的线性渐变

径向渐变(radial-gradient)

径向渐变是由中心向外渐变的。可以控制它的中心(默认渐变是中心是center),形状(圆形或者椭圆形),大小,以及上面讲到的渐变范围等。

html :

css:div {    height: 100px;    width: 200px;    background: radial-gradient(red 20%, blue 80%);

}

径向渐变

作者：前端渣渣

链接：https://www.jianshu.com/p/10d593a76378

打开App，阅读手记