CSS3渐变的使用方法:

CSS3渐变的使用方法:

css3的渐变分为两种,下面进行依次的讲解:.线性渐变. .径向渐变.

*1.线性渐变

*(默认情况下为从上到下的渐变方式)
background-image: linear-gradient( dir,color1 percent, color2 percent, …);
1-1.重复线性渐变:
background-image: repeating-linear-gradient(dir,color1 transperent, color2 transperent, …);
注:
dir:
方位名词,规定颜色从什么方位开始 渐变;也可以使用度数来规定渐变方向
比如:to right, to left, to top, to bottmo,to rightbottom,to left top等等也可以为45deg,-90deg;等等
transperent:
百分比表示这个颜色到这个位置就结束了
;颜色也可以使用rgba()设置对应的透明度;rgba() 函数中的最后一个参数可以是从 0 到 1 的值,它可以定义颜色的透明度：0 表示完全透明，1 表示完全不透明。
repeating:
为线性渐变重复命令使用方法一般放在 linear-gradient前面;

代码实现案例:

实现效果图:

**2.径向渐变

.(默认情况下为均匀分布的渐变方式)
background-image: radial-gradient(shape size at position, color1 transperent, …, color2 transperent);
2-1.径向渐变的重复:
background-image: repeating-radial-gradient(shape size at position, color1 transperent, …, color2 transperent);
注:
size :(用来定义渐变的大小)
closest-side 距离最近的边
farthest-side 距离最远的边
closest-corner距离最近的角
farthest-corner距离最远的角
shape(用来定义形状默认为ellipse)
circle 表示圆形，ellipse 表示椭圆形。
position:
用来规定渐变程度,一般用百分比来表示使用

代码实现案例:

实现效果图:
感谢您的浏览,您的支持是我最大的动力!