css渐变之linear-gradient

2017-09-13 12:30:26来源:CSDN作者:qq_35023116人点击

分享

css的渐变

css的渐变分两大类型的渐变:第一种是线性渐变;第二种是径向渐变

       一、线性渐变 linear-gradient

(1)、css线性渐变默认是从上到下的渐变。

默认模式代码如下:

运行结果:

(2)、自己改编样式

自己可以根据给linear-gradient设置方向属性来设置单向渐变方向

语法:background: linear-gradient(directioncolor-stop1color-stop2, ...);

代码如下:

运行结果:

根据上面的样式,你可以自己编写一下你想要的方向:left(to right);right(to left);top(to bottom);bottom(to top);left top;left bottom;right top;

right bottom;top left;top right;bottom left;bottom right.

repeating-linear-gradient:根据字面意思就知道是重复线性渐变。(自己去编写一遍吧)

radial-gradient等下次再弄。待续.......

最新文章

123

最新摄影

微信扫一扫

第七城市微信公众平台