《CSS3常用的几种颜色渐变模式总结》由会员分享，可在线阅读，更多相关《CSS3常用的几种颜色渐变模式总结（5页珍藏版）》请在金锄头文库上搜索。
1、CSS3常用的几种颜色渐变模式总结、线性渐变:语法：下述值用来表示渐变的方向，可以使用角度或者关键字来设置：:用角度值指定渐变的方向（或角度）。:设置渐变为从右到左。相当于:设置渐变从左到右。相当于:设置渐变从下到上。相当于:设置渐变从上到下。相当于0这是默认值，等同于留空不写。用于指定渐变的起止颜色：:指定颜色。:用长度值指定起止色位置。不允许负值:用百分比指定起止色位置。示例:二、径向渐变：语法:=|=radial-gradient(|at?,|at,?,+)确定圆心的位置。如果提供2个参数，第一个表示横坐标，第二个表示纵坐标；如果只提供一个，第二值默认为50%卩center：用长度值指定
2、径向渐变圆心的横坐标值。可以为负值。percentage：用百分比指定径向渐变圆心的横坐标值。可以为负值。：用长度值指定径向渐变圆心的纵坐标值。可以为负值。percentage：用百分比指定径向渐变圆心的纵坐标值。可以为负值。center:设置中间为径向渐变圆心的横坐标值。center：设置中间为径向渐变圆心的纵坐标值。lef：t设置左边为径向渐变圆心的横坐标值。righ：t设置右边为径向渐变圆心的横坐标值。top设置顶部为径向渐变圆心的纵坐标值。bottom设置底部为径向渐变圆心的纵坐标值。确定圆的类型circle指定圆形的径向渐变ellipse指定椭圆形的径向渐变。circle|ellip
3、se都接受该值作为size。closest-side指定径向渐变的半径长度为从圆心到离圆心最近的边。closest-corner指定径向渐变的半径长度为从圆心到离圆心最近的角。farthest-side指定径向渐变的半径长度为从圆心到离圆心最远的边。farthest-corner指定径向渐变的半径长度为从圆心到离圆心最远的角。circle接受该值作为size。用长度值指定正圆径向渐变的半径长度。不允许负值。ellipse接受该值作为size。用长度值指定椭圆径向渐变的横向或纵向半径长度。不允许负值。用百分比指定椭圆径向渐变的横向或纵向半径长度。不允许负值。示例#RadialCenterCirc
4、lefloat:left;background:radial-gradient(circleatcenter,#ff0000,#ffff00,#00ffff);#RadialClosestSidefloat:left;background:radial-gradient(circleclosest-side,#ff0000,#00ff00,#ffff00);#RadialFarthestSidefloat:left;background:radial-gradient(farthest-side,#ff000020%,#ffff0060%,#00ff0080%);#RadialRightTop
5、float:left;background:radial-gradient(atrighttop,#ff0000,#ffff00,#00ff00);#RadialRadiusCenterfloat:left;background:radial-gradient(farthest-sideattopright,#ff0000,#ffff00,#01fefe);#RadialGroupfloat:left;background:radial-gradient(farthest-sideattopright,#ff0000,#ffff00,#009f00,transparent),radial-gr
6、adient(60pxattopleft,#ff0000,#ffff00,#00ff0e);三、重复的线性渐变：repeating-linear-gradient语法和参数类似线性渐变，这里不在赘述。详情请参考CSS手册。示例：#RepeatingLinearPercentagefloat:left;background:repeating-linear-gradient(#ff0000,#00ff0010%,#00000015%);#RepeatingLinearRightfloat:left;background:repeating-linear-gradient(toright,#ff0
7、000,#00ff0010%,#00000015%);#RepeatingLinearAnglefloat:left;background:repeating-linear-gradient(45deg,#ff0000,#00ff0010%,#0000ff15%);#RepeatingLinearBottomLeftfloat:left;background:repeating-linear-gradient(tobottomleft,#00ffff,#ff000010%,#00ff0015%);四、重复的径向渐变：repeating-radial-gradient语法和参数类似径向渐变，这里
8、不在赘述。详情请参考CSS手册。示例：#RepeatingRadialCirclefloat:left;background:repeating-radial-gradient(circle,#ff00000,#00ff0010%,#0000ff15%);#RepeatingRadialTopLeftfloat:left;background:repeating-radial-gradient(attopleft,#ff0000,#00ff0010%,#0de0f015%,#ffff0020%,#00000025%);#RepeatingRadialClosestCornerfloat:lef
9、t;background:repeating-radial-gradient(circleclosest-cornerat20px50px,#00ff00,#ff000010%,#00ffff20%,#ffff0030%,#ff00ff40%);完整的例子：ImageCSS3divwidth:200px;height:100px;margin:10px5px;border:1pxsolid#ddd000;#LinearStartToEndfloat:left;background:linear-gradient(#ff0000,#00ff00);#LinearPercentagefloat:l
10、eft;background:linear-gradient(#0000ff,#ff000052%,#00ff00);#LinearAnglePercentagefloat:left;background:linear-gradient(90deg,#ff000020%,#00ff0050%,#00000080%);#LinearAnglefloat:left;background:linear-gradient(30deg,#ffff0030%,#ff0000,#00ff00);#LinearTopRightfloat:left;background:linear-gradient(tori
11、ghttop,#00ff00,#ff000050%,#0000ff);#RadialCenterCirclefloat:left;background:radial-gradient(circleatcenter,#ff0000,#ffff00,#00ffff);#RadialClosestSidefloat:left;background:radial-gradient(circleclosest-side,#ff0000,#00ff00,#ffff00);#RadialFarthestSidefloat:left;background:radial-gradient(farthest-si
12、de,#ff000020%,#ffff0060%,#00ff0080%);#RadialRightTopfloat:left;background:radial-gradient(atrighttop,#ff0000,#ffff00,#00ff00);#RadialRadiusCenterfloat:left;background:radial-gradient(farthest-sideattopright,#ff0000,#ffff00,#01fefe);#RadialGroupfloat:left;background:radial-gradient(farthest-sideattop
13、right,#ff0000,#ffff00,#009f00,transparent),radial-gradient(60pxattopleft,#ff0000,#ffff00,#00ff0e);#RepeatingLinearPercentagefloat:left;background:repeating-linear-gradient(#ff0000,#00ff0010%,#00000015%);#RepeatingLinearRightfloat:left;background:repeating-linear-gradient(toright,#ff0000,#00ff0010%,#
14、00000015%);#RepeatingLinearAnglefloat:left;background:repeating-linear-gradient(45deg,#ff0000,#00ff0010%,#0000ff15%);#RepeatingLinearBottomLeftfloat:left;background:repeating-linear-gradient(tobottomleft,#00ffff,#ff000010%,#00ff0015%);#RepeatingRadialCirclefloat:left;background:repeating-radial-gradient(circle,#ff00000,#00ff0010%,#0000ff15%);#RepeatingRadialTopLeftflo
