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:

用来规定渐变程度,一般用百分比来表示使用

代码实现案例:

实现效果图:

 感谢您的浏览,您的支持是我最大的动力!

本人唯一csdn号码