线性渐变接受三个参数，渐变的方向，起始颜色，结束颜色。
标准语法及参数：linear-gradient:([[<angle> | to <side-or-corner>],]?<stop>,<stop>[,<stop>]*)
<angle>:通过角度来确定渐变的方向。0度表示渐变方向从下向上，90度表示从左向右。 关键词:通过使用关键词来确定渐变的方向。比如“to top”，从下到上，"to right"，从左到右，"to bottom"，从上到下，"to left"，从右到左。这些关键词对应的角度值为“0deg”，“90deg”，“180deg”，“270deg”。除了使用“to top”，“to right”之外，还可以使用“to top left”,从右下角到左上角，“to bottom right”,左上角到右下角。 stop:表示颜色与位置的起始点和结束点。可以插入多个stop。
<html><head><title>css3 线性渐变</title><style>div{ height:100px; width:100px; background:linear-gradient(to bottom,rgb(255, 0, 0),rgb(0, 255, 33));}</style></head><body><div></div></body></html>
标准语法及参数：radial-gradient:([[<shape> || <size>][at <position>]?,| at <position>,]?<color-stop>[,<color-stop>]+)
<position>：用来定义径向渐变的圆心位置。如果省略，默认值是center。其他关键词是“left”，“right”，“top”，“bottom”，“left top”，“right top”，“right bottom”，“left bottom”，还可以用长度值与百分比设置。 <shape>：用来定义径向渐变的形状。主要包括circle(圆形)，ellipse(椭圆)。 <size>：定义径向渐变形状大小。可用关键词，长度值与百分比。 <color-stop>：定义径向渐变线的颜色与位置。
<html><head><title>css3 径向渐变</title><style>div{ height:100px; width:100px; background:radial-gradient(circle at 50px 50px,rgb(255, 216, 0) 50px,rgb(232, 14, 14) 100px); }</style></head><body> <div></div></body></html> 
重复线性渐变repeating-linear-gradient与线性渐变linear-gradient他们的属性相同，但沿着线性方向无限重复。
<!doctype html><html><head><title>css3 重复线性渐变</title><style> div{ height:100px; width:100px; background:repeating-linear-gradient(rgb(255, 216, 0) 20px,rgb(232, 14, 14) 40px); }</style></head><body><div></div></body></html>
重复径向渐变repeating-radial-gradient语法与径向渐变类似，但以径向方向无限重复。
<!doctype html><html><head><title>css3 重复径向渐变</title><style> div{ height: 100px; width: 100px; background: repeating-radial-gradient(circle,rgb(255, 216, 0) 20px,rgb(232, 14, 14) 40px); }</style></head><body><div></div></body></html>
新闻热点
疑难解答
